I am new to learning jQuery and JavaScript. I have small task that is becoming hard to solve.

On step one of a checkout form #ps-cart-checkout-form, I have to disable <div class="button">Next</div> when cart table is empty or emptied by clicking an "X" image in cart table row So that user does not go forward. Button's location and HTML is:

<div class="small-right">
<span class="page">Side <span class="current">1</span>/2</span>
<div class="button">Next</div>

Cart table (.table-cart) when having one or more products it contains <thead> tag but when empty the <thead> becomes <tbody> with one row <th> in it.

My approach:

I have tried to create a module that add js on hook_form_alter. and in js file. I have created :

(function ($) {
Drupal.behaviors.myModule = {
  attach: function (context, settings) {
      var $form = $("#cart-checkout-form");
      if($($form.find("thead").lenght == 0) {
        $(".button").unbind( "click" );


With above code I am trying to find out if there is no <thead> that means table is empty and therefore above code should disable the click next button. There already having a jQuery code that handles click event on Next div.

1 Answer 1


What module are you using for the cart?

you can also use preventDefault() function to stop the page from loading to the next page.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.