jquery - Issue with multiple checkboxes -
disclaimer: have been working jquery week , html/css 2 weeks.
i have form contains couple of checkboxes , various text input fields. first checkbox #ship_to_billing. if checked hides , unrequires fieldset #shipping_info. if not checked of fields within fieldset must have value. so, either ship_to_billing checkbox must checked or fieldset fields must filled out in order user submit form, otherwise alert instructing them complete appropriate areas. that's working excellently on own. but, added additional required checkbox @ bottom of form , can't figure out how incorporate current jquery setup. new checkbox #age_verification. needs checked independent of of other inputs on form. if not, should receive alert check box before proceeding. after adding validation last checkbox, nothing working, lets user submit form without filling out or checking of inputs.
also wondering if doing result in potentially 2 alerts popping @ same time if try submit form without filling in or if there might better way go.
note html within form (form action="/cart/add" method="post")
<a type="button" class="btn btn-primary" href="#product-options" data-toggle="modal">buy this!</a> <div class="modal hide fade" id="product-options"> <div class="modal-header center"> <a class="close" data-dismiss="modal">x</a> <h3>when, , how?</h3> </div> <div class="modal-body l-m"> {% include 'datepicker' %} <hr> <input type="hidden" name="properties[ship_to_billing]" value="" /> <label for="ship_to_billing" style="max-width:335px;"> <input id="ship_to_billing" type="checkbox" name="properties[ship billing address]" value="yes" {% if properties.ship_to_billing %} checked="checked"{% endif %} /> <font size=1>check here have items shipped billing address (collected during checkout). otherwise please fill out information below.</font> </label><br /> <fieldset id="shipping_info"> <label for="shipping_name">name of recipient:</label> <input class="input-xlarge" type="text" id="shipping_name" placeholder="name" name="properties[recipient]" /> <label for="address_street">shipping address:</label> <input class="input-xlarge" type="text" id="address_street" placeholder="street address" name="properties[address]" /> <input class="input-xlarge" type="text" id="address_city" placeholder="city" name="properties[city]" /> <input class="input-medium" type="text" id="address_province" placeholder="state" name="properties[state]" /> <input class="input-medium" type="text" id="address_zip" placeholder="zip code" name="properties[zip]" /> </fieldset> <p> <label for="gift_msg">gift message : (optional)</label> <textarea id="gift_msg" placeholder="please type message" name="properties[gift message]" rows="4" cols="45"></textarea> </p> <p> <input type="hidden" name="properties[age_verified]" value="" /> <label for="age_verified" style="max-width:335px;"> <input id="age_verification" type="checkbox" name="properties[age verified]" value="yes" {% if properties.age_verified %} checked="checked"{% endif %} required="required" /> <font size=1>this gift contains alcohol. checking box certify 21yrs of age or older. adult signature id required upon delivery.</font> </label> </p> </div> <div class="modal-footer"> <div class="btn-group"> <button href="#" class="btn" data-dismiss="modal">cancel</button> <button type="submit" class="btn btn-primary" onclick="return validateshipping();" id="addtocart">add cart</button> </div> </div> </div> and jquery:
<script> // hides shipping info fieldset if ship billing checked $(function(){ $("#ship_to_billing").change(function(){ if ($(this).is(":checked")) $("#shipping_info").hide(); else $("#shipping_info").show(); }); }); // validates address fields filled out unless ship billing checked... function validateshipping() { if (!$("#ship_to_billing").is(":checked")) { var inputs = $("#shipping_info input"); var ready = true; inputs.each(function(){ if ($(this).val() == '') { ready = false; return false; } }); if (!ready) { alert("please tell send this. either choose ship billing address or fill out recipient name , shipping address fields. thanks!"); return false; } } return true; } // trouble if (!$('#age_verified').is(':checked')) { alert("please check box verify 21 years of age or older."); return false; } }); </script>
move age if statement inside verification function , think want
#age_verification instead of
#age_verified // hides shipping info fieldset if ship billing checked $(function () { $("#ship_to_billing").change(function () { if ($(this).is(":checked")) $("#shipping_info").hide(); else $("#shipping_info").show(); }); }); // validates address fields filled out unless ship billing checked... function validateshipping() { if (!$("#ship_to_billing").is(":checked")) { var inputs = $("#shipping_info input"); var ready = true; inputs.each(function () { if ($(this).val() == '') { ready = false; return false; } }); if (!ready) { alert("please tell send this. either choose ship billing address or fill out recipient name , shipping address fields. thanks!"); return false; } } // trouble if (!$('#age_verification').is(':checked')) { alert("please check box verify 21 years of age or older."); return false; } return true; }
Comments
Post a Comment