Question

I have a form with n multiple choice questions implemented as radio buttons (using jquery-ui). I would like to ensure that all the questions have been answered before allowing the user to submit the form. I am running into two issues while performing this validation:

• On initial load, the submit button does not respond to clicks or mouseovers until all questions have a response selected as desired. However, it still appears to be clickable (I would like this to be faded out)

• If the reset button is pressed, the submit button is faded out (as desired) but I am unable to re-enable the submit button once the form has been completed.

This is my first time using javascipt/jquery. What is going wrong? How do I achieve the desired functionality across both cases?

---

Here is the pertinent javascript portion:

$(document).ready(function(){
    $( '.button' ).button ();
    $( '.radio-set' ).buttonset ();
    $( 'input[type="submit"]' ).attr( 'disabled', true );

    var progress = 0;
    var total_fields = $('.response').length

    /* Track Progress function*/
    $('input[type="radio"]').click( function(){        
      progress = $('input[type="radio"]:checked').length
      $(".progressbar").progressbar( {value: ( progress / total_fields ) * 100} )
      console.log(progress, total_fields)
      if( progress == total_fields ){
        console.log( "Hello from inside the conditional" )
        $( 'input[type="submit"]' ).removeAttr( 'disabled' );
      } 
    });

    $( 'input[type="reset"]' ).click( function(){
      progress = 0
      $( ".progressbar" ).progressbar( {value: 0} )
      $( 'input[type="submit"]' ).attr( 'disabled', true );
    });
});

Example of one of the questions within the form (with bacon filler text):

        <div class="model_feature">
          <span class="feature_name" title="M1">M1</span>
          <span class="response radio-set">
            <label for="M1-1">1</label>
            <input type="radio" name="M1" id="M1-1" value="1"  class="feature-input" autocomplete="off" />
            <label for="M1-0">0</label>
            <input type="radio" name="M1" id="M1-0" value="0"  class="feature-input" autocomplete="off" />
            <label for="M1-Unk">Unknown</label>
            <input type="radio" name="M1" id="M1-Unk" value="Unknown"  class="feature-input" autocomplete="off" />
          </span <!-- close response -->
          <span class="feature_description">Chicken spare ribs capicola beef brisket hamburger. Kielbasa filet mignon tail ribeye ball tip ground round.</span>
        </div> <!-- close model_feature -->

Input and Reset buttons for completeness:

        <input type="reset" class="button" id="reset-button" />
        <input type="submit" class="button" id="submit-button" disabled="disabled" />

Answer 1

As you turn you button to a jQuery UI Button, you’d better use the jQuery UI methods of the Button plugin to enable/disbale your button, instead of the changing directly the DOMElement attribute disabled.

1. For the initial state, you initialize your Button and then only change the disabled attribute, so the change is taken into account by the Button plugin.

   // either disable first the button then initialize
   $( 'input[type="submit"]' ).attr( 'disabled', true );
   $( '.button' ).button ();
   

   or

   // set the Button's option
   $( '.button' ).button ();
   $( 'input[type="submit"]' ).button('option', 'disabled', true);
   

2. For the second problem, use the Button’s option setter to re-enable your button:

   $( 'input[type="submit"]' ).button('option', 'disabled', false);