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 in a dropdown "AFTER" the ticket selection is made.

I have a number of Javascrpts in place so wondering if there is a clash somewhere? The first bit of code is in the HEAD of the 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 is the 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 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);
                return false;
            }
            if(submitcount27389 == 0){
                submitcount27389++;
                theForm.submit();
                return false;
            }else{
                alert("Form submission is in progress.");
                return false;
            }
            }
            //]]>
        </script>
    </form>

The page can be found at http://www.faa.net.au/test/femmes-event-rego-form.html if you would like to test it and see the results.

You need to select more than 1 GUEST, then CREDIT CARD AUTHORISATION and then finally select something in the "Where did you hear about us?" dropdown to see what happens.

I dont understand why the DIV hides once I change a value in the last dropdown menu??

I have added a JSFiddle - http://jsfiddle.net/4REan/ - but I cant get it working properly but hopefully with all the code there it will help??

回答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 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 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);
        return false;
    }
    if (submitcount27389 == 0) {
        submitcount27389++;
        theForm.submit();
        return false;
    } else {
        alert("Form submission is in progress.");
        return false;
    }
}
 });

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 :)

来源：https://stackoverflow.com/questions/17827033/div-hiding-when-changing-dropdown-value

标签

javascript

html

css

forms

business-catalyst