0

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??

Community
  • 1
  • 1
sampotts
  • 293
  • 1
  • 5
  • 15
  • Hey buddy, can you create a jsfiddle for this, it will be much easier for me to rectify your problem. http://jsfiddle.net – dreamweiver Jul 24 '13 at 07:27
  • If i`m not wrong this should be the line which is causing that behaviour.`if (theForm.CAT_Custom_266105 && theForm.CAT_Custom_266107.value != "1") why += checkSelected(theForm.CAT_Custom_266105, "Payment Options:");`. If you can post all the relevant code required for this behaviour in jsfiddle, then i'll be able to do something – dreamweiver Jul 24 '13 at 07:33
  • I shall give the JSFiddle a go. – sampotts Jul 24 '13 at 22:33
  • @dreamweiver - I cant seem to get it working on JSFiddle as I have on my website? The form verification is using Javascript as shown above but I dont think I have entered in correctly on this JSFiddle. If you could take a look at it that would be great - http://jsfiddle.net/4REan/ Also, I have added 2 External Resources to save me finding all the CSS. – sampotts Jul 24 '13 at 23:41
  • 1
    I have rectified your problem, you were toggling the "payment method" div generically, as it was getting called for all dropdown changes in thr form, as of now i have modified it happen only for appropriate dropdown.here is the jsfiddle,http://jsfiddle.net/4REan/1/.let me know if everything is working fine – dreamweiver Jul 25 '13 at 06:45
  • Thats good, lets close this question from SO, i`ll post this in answer section you can check it as "Answer" :) – dreamweiver Jul 26 '13 at 05:45
  • @dreamweiver - any chance you can help me fix the final components of this form now this is working? I created a new Question - http://stackoverflow.com/questions/17874338/form-output-values-are-not-correct – sampotts Jul 29 '13 at 05:33

1 Answers1

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

dreamweiver
  • 6,002
  • 2
  • 24
  • 39