Check if all the questions in my form have an answer Jquery

Question

Hope you guys can help. I have a form like this one,

http://jsfiddle.net/79fCm/

form:

      <form action="#">
        <header>
        <h2 id="title">This is a Survey Title</h2>
        <div>This are some Survey Instructions</div>
        </header>

     <ul class="Question_list">
<li class="question">
  <div>
    <fieldset>
      <p>Question</p>
      <div>
        <input id="radioDefault_5" name="Field5" type="hidden" value="">
        <div>
          <input id="Field5_0" name="Field5" type="radio" value="First Choice" tabindex="5" checked="checked">
          <label class="choice" for="Field5_0">First Choice</label>
        </div>
        <div>
          <input id="Field5_1" name="Field5" type="radio" value="Second Choice" tabindex="6">
          <label class="choice" for="Field5_1">Second Choice</label>
        </div>
        <div>
          <input id="Field5_2" name="Field5" type="radio" value="Third Choice" tabindex="7">
          <label class="choice" for="Field5_2">Third Choice</label>
        </div>
      </div>
    </fieldset>
  </div>
</li>
<li class="question">
  <div>
    <fieldset>
      <p>
        Question 2
      </p>
      <div>
        <input id="Field6" name="Field6" type="checkbox" value="First Choice" tabindex="8">
        <label class="choice" for="Field6">First Choice</label>
      </div>
      <div>
        <input id="Field7" name="Field7" type="checkbox" value="Second Choice" tabindex="9">
        <label class="choice" for="Field7">Second Choice</label>
      </div>
      <div>
        <input id="Field8" name="Field8" type="checkbox" value="Third Choice" tabindex="10">
        <label class="choice" for="Field8">Third Choice</label>
      </div>
    </fieldset>
  </div>
</li>
  </ul>  
  <div>
    <div>
      <button type="button" id="nextQ" class="btn btn-default">Next</button>
      <button id="saveForm" class="btn btn-default" disabled>Submit</button>
    </div>
  </div>

</form>

And I want to enable the submit button as soon as all my questions have an answer chosen. I tried something like this but no success:

var $fields = $(":input");
    $fields.keyup(function() {
        var $emptyFields = $fields.filter(function() {
            return $.trim(this.value) === "";
        });

        if (!$emptyFields.length) {
           //enable button
        } else {
           // disable button
        }
    });

How do i do that with jquery?

Thank you so much.

Answer 1

There's already a JavaScript solution. I'll use jQuery to provide an answer per the user's request. I had to make some changes to the html as below:

1. The checkboxes have different name attribute values. I made them all the same - question #2
2. The radio buttons of question 1 have the same name attribute values but there's a hidden input element with the same name attribute value - I commented that out.

Here are my considerations:

1. Different form element types (text boxes, radio buttons, select, textareas, checkboxes) have different ways of validating them. Fortunately radios and checkboxes validate similarly.
2. Different form element types have different triggers one can use for triggering the start of a validation check.

If the form were to expand to use several different form element types, lines can be added to the event binding part and a corresponding case section in the switch statement. It's quite straight forward:

$(function() {
    var elements = $('form').find('input,select,textarea')
    .map( function(v, i) { return this.name; }).get();
    $.unique( elements );
    console.log( elements );
    $('input[type=text]').on('keyup',ready2Submit);
    $(':radio,:checkbox').on('change',ready2Submit);        

    function ready2Submit() {
        var ready = true;
        $.each(elements, function() {
            var el = $('[name=' + this + ']');
            switch( el[0].type ) {
                case 'checkbox':
                case 'radio':
                    if( el.filter(':checked').length === 0 ) {
                        ready = false;
                        return false;
                    }
                    break;
                case 'text':
                    if( el[0].value.trim().length === 0 ) {
                        ready = false;
                        return false;
                    }
                    break;
            }
        });
        $('#saveForm').prop('disabled',!ready);
    }
});

THIS DEMO shows the above code at work. I added a text box just to show how the code can be expanded on when & if necessary.

Answer 2

This isn't a great design since if script is off, you will have some trouble. You could get around this by turning it off with javascript.

Anyway try this solution enable

Your problem is how you are trying to evaluate if the input is filled out. If all of your inputs are checkboxes you should be fine though with that solution. Below is an evaluation snipped from that answer.

 if (el.type == 'checkbox' && !el.checked)