Div "hiding" When Changing Dropdown Value

This is related to a previous question I asked: Hide / Show Multiple Divs I have the code in place from my previous question and it seems work ok apart from when I change a value i

Solution 1:

There was slight mistake in the payment method (div) toggle function.i have corrected it and its working fine here is the modified js code

JS CODE:

$(function () {
// $('.cat_dropdown').change(function () { //Commented as it was generic call
$('#CAT_Custom_266107').change(function () { //added for specific callalert($(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;

functioncheckWholeForm27389(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 you hear about us?");

    }
    if (theForm.CaptchaV2) why += captchaIsInvalid(theForm, "Enter Word Verification in box below", "Please enter the correct Word Verification as seen in the image");
    if (why != "") {
        alert(why);
        returnfalse;
    }
    if (submitcount27389 == 0) {
        submitcount27389++;
        theForm.submit();
        returnfalse;
    } else {
        alert("Form submission is in progress.");
        returnfalse;
    }
}
 });

Here is the js fiddle for LIVE DEMO

I would like to suggest you one thing, whatever functionality you want to do via jQuery,add them under single "$(document).ready(function () { .... } );" or "$(function () { ...} );" (both the syntax are valid), because i observed in your code that you have added this multiple times, this would not matter for the browser,as it will execute everything at body load time. but this is bad practice of coding,as it will increase the LOC and also its redundant code. do avoid it next time.

Happy Coding :)