forms - Using Jquery to Disable Submit Button if an option is selected -
i have simple form 4 select fields. if yes selected on form field, submit button needs disabled , hidden div should appear. here's example of markup:
<form> have read information on product(s)<select name="field4"> <option value="yes">yes</option> <option value="no">no</option> </select> have allergies ingredients in product(s)? <select name="field5"><option value="yes">yes</option> <option value="no">no</option> </select> pregnant? <select name="field6"> <option value="yes">yes</option> <option value="no">no</option> </select> have ever used type of product , 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 appear if of 4 dropdowns marked yes.</div>
thanks on one. jquery novice trying best learn.
i don't understand business logic of way have form built , requirements but... going based on have said here do.
- write function check options, change disable/enable submit, show/hide div
- call function on load
- call function check options every time 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 modified html:
<form> <select name="field4"> <option value="yes">yes</option> <option value="no">no</option> </select> have read information on product(s)<br/> <select name="field5"> <option value="yes">yes</option> <option value="no">no</option> </select> have allergies ingredients in product(s)?<br/> <select name="field6"> <option value="yes">yes</option> <option value="no">no</option> </select> pregnant?<br/> <select name="field7"> <option value="yes">yes</option> <option value="no">no</option> </select> have ever used type of product , had undesirable results?<br/> <br/> <input name="cmdsubmit" type="submit" value="submit" /> </form> <div id="hidden-div" style="display:none;">hidden div appear if of 4 dropdowns marked yes.</div>
example webpage:
http://mikegrace.s3.amazonaws.com/forums/stack-overflow/example-disable-submit-dynamically.htmlon load:
all options 'no' one:
all options 'yes':
Comments
Post a Comment