javascript - DIV "hiding" when changing dropdown value -
this related previous question asked: hide / show multiple divs
i have code in place previous question , seems work ok apart when change value in dropdown "after" ticket selection made.
i have number of javascrpts in place wondering if there clash somewhere? first bit of code in head of document.
<head> <script type="text/javascript"> $(function() { $('.cat_dropdown').change(function() { $('#paymethod').toggle($(this).val() >= 2); }); }); </script> <script type="text/javascript"> $(document).ready(function () { $(".paymentmethod").click(function () { $(".paymentinfo").hide(); switch ($(this).val()) { case "credit card authorisation": $("#pay0").show("slow"); break; case "direct deposit": $("#pay1").show("slow"); break; case "cash payment (faa office)": $("#pay2").show("slow"); break; } }); }); </script> </head> this second section of code form verification:
<script src="/catalystscripts/validationfunctions.js" type="text/javascript"></script> <script type="text/javascript"> //<![cdata[ var submitcount27389 = 0;function checkwholeform27389(theform){ var why = ""; if (theform.firstname) why += isempty(theform.firstname.value, "first name"); if (theform.lastname) why += isempty(theform.lastname.value, "last name"); if (theform.homeaddress) why += isempty(theform.homeaddress.value, "home address"); if (theform.homecity) why += isempty(theform.homecity.value, "home city"); if (theform.homestate) why += isempty(theform.homestate.value, "home state"); if (theform.homezip) why += isempty(theform.homezip.value, "home zipcode"); if (theform.homecountry) why += checkdropdown(theform.homecountry.value, "home country"); if (theform.emailaddress) why += checkemail(theform.emailaddress.value); if (theform.homephone) why += isempty(theform.homephone.value, "home phone number"); if (theform.cat_custom_266106) why += checkdropdown(theform.cat_custom_266106.value, "available dates:"); if (theform.cat_custom_266143) why += checkdropdown(theform.cat_custom_266143.value, "member tickets:"); if (theform.cat_custom_266107) why += checkdropdown(theform.cat_custom_266107.value, "guest tickets:"); if (theform.cat_custom_266105 && theform.cat_custom_266107.value != "1") why += checkselected(theform.cat_custom_266105, "payment options:"); if (theform.cat_custom_266104) why += checkdropdown(theform.cat_custom_266104.value, "where did hear us?"); if (theform.captchav2) why += captchaisinvalid(theform, "enter word verification in box below", "please enter correct word verification seen in image"); if(why != ""){ alert(why); return false; } if(submitcount27389 == 0){ submitcount27389++; theform.submit(); return false; }else{ alert("form submission in progress."); return false; } } //]]> </script> </form> the page can found @ http://www.faa.net.au/test/femmes-event-rego-form.html if test , see results.
you need select more 1 guest, credit card authorisation , select in "where did hear us?" dropdown see happens.
i dont understand why div hides once change value in last dropdown menu??
i have added jsfiddle - http://jsfiddle.net/4rean/ - cant working code there help??
there slight mistake in payment method (div) toggle function.i have corrected , working fine here modified js code
js code:
$(function () { // $('.cat_dropdown').change(function () { //commented generic call $('#cat_custom_266107').change(function () { //added specific call alert($(this).val()); $('#paymethod').toggle($(this).val() >= 2); }); }); $(document).ready(function () { $(".paymentmethod").click(function () { $(".paymentinfo").hide(); switch ($(this).val()) { case "credit card authorisation": $("#pay0").show("slow"); break; case "direct deposit": $("#pay1").show("slow"); break; case "cash payment (faa office)": $("#pay2").show("slow"); break; } }); }); $(document).ready(function () { var submitcount27389 = 0; function checkwholeform27389(theform) { var why = ""; if (theform.firstname) why += isempty(theform.firstname.value, "first name"); if (theform.lastname) why += isempty(theform.lastname.value, "last name"); if (theform.homeaddress) why += isempty(theform.homeaddress.value, "home address"); if (theform.homecity) why += isempty(theform.homecity.value, "home city"); if (theform.homestate) why += isempty(theform.homestate.value, "home state"); if (theform.homezip) why += isempty(theform.homezip.value, "home zipcode"); if (theform.homecountry) why += checkdropdown(theform.homecountry.value, "home country"); if (theform.emailaddress) why += checkemail(theform.emailaddress.value); if (theform.homephone) why += isempty(theform.homephone.value, "home phone number"); if (theform.cat_custom_266106) why += checkdropdown(theform.cat_custom_266106.value, "available dates:"); if (theform.cat_custom_266143) why += checkdropdown(theform.cat_custom_266143.value, "member tickets:"); if (theform.cat_custom_266107) why += checkdropdown(theform.cat_custom_266107.value, "guest tickets:"); if (theform.cat_custom_266105 && theform.cat_custom_266107.value != "1") why += checkselected(theform.cat_custom_266105, "payment options:"); if (theform.cat_custom_266104) { why += checkdropdown(theform.cat_custom_266104.value, "where did hear us?"); } if (theform.captchav2) why += captchaisinvalid(theform, "enter word verification in box below", "please enter correct word verification seen in image"); if (why != "") { alert(why); return false; } if (submitcount27389 == 0) { submitcount27389++; theform.submit(); return false; } else { alert("form submission in progress."); return false; } } }); here js fiddle live demo
i suggest 1 thing, whatever functionality want via jquery,add them under single "$(document).ready(function () { .... } );" or "$(function () { ...} );" (both syntax valid), because observed in code have added multiple times, not matter browser,as execute @ body load time. bad practice of coding,as increase loc , redundant code. avoid next time.
happy coding :)
Comments
Post a Comment