Question

I have a simple form with four select fields. If YES is selected on any form field, the submit button needs to be disabled and a hidden div should appear. Here’s an example of my markup:

<form>
I have read the information on the product(s)<select name="field4"> <option value="Yes">Yes</option> <option value="No">No</option> </select>

Do you have any allergies to any ingredients in product(s)?
 <select name="field5"><option value="Yes">Yes</option> <option value="No">No</option> </select>

Are you pregnant?
 <select name="field6"> <option value="Yes">Yes</option> <option value="No">No</option> </select>

Have you ever used this type of product and had undesirable results?
 <select name="field7"> <option value="Yes">Yes</option> <option value="No">No</option> </select>

<input name="cmdSubmit" type="submit" value="Submit" />
</form>


<div style="display:none;">Hidden div only to appear if any of the four dropdowns are marked YES.</div>

Thanks for your help on this one. I am a jquery novice trying my best to learn.

Answer 1

I don’t completely understand the business logic of the way you have the form built and your requirements but… going based on what you have said here is what I would do.

1. write function to check all options, change disable/enable submit, show/hide div
2. call function on load
3. call function to check all options every time an option value changes

.

checkOptions();
$("select").change(checkOptions);

function checkOptions() {
  var yesFound = false;
  $("select").each(function(index, element) {
    if ( $(element).val() == "Yes" ) {
      yesFound = true;
    }
  });

  if (yesFound) {
    $("#hidden-div").show();
    $("input[type=Submit]").attr("disabled","disabled");
  } else {
    $("#hidden-div").hide();
    $("input[type=Submit]").removeAttr("disabled");
  };
}

with slightly modified HTML:

<form>
  <select name="field4"> 
    <option value="Yes">Yes</option>
    <option value="No">No</option>
  </select> I have read the information on the product(s)<br/>
  <select name="field5">
    <option value="Yes">Yes</option>
    <option value="No">No</option>
  </select> Do you have any allergies to any ingredients in product(s)?<br/>
  <select name="field6">
    <option value="Yes">Yes</option>
    <option value="No">No</option>
  </select> Are you pregnant?<br/>
  <select name="field7">
    <option value="Yes">Yes</option>
    <option value="No">No</option>
  </select> Have you ever used this type of product and had undesirable results?<br/>
  <br/>
  <input name="cmdSubmit" type="submit" value="Submit" />
</form>
<div id="hidden-div" style="display:none;">Hidden div only to appear if any of the four dropdowns are marked YES.</div>

Example webpage:

http://mikegrace.s3.amazonaws.com/forums/stack-overflow/example-disable-submit-dynamically.html

On load:

all options ‘No’ but one:

all options ‘Yes’: