更改下拉值时DIV“隐藏”

时间:2013-07-24 06:48:24

标签: javascript html css forms business-catalyst

这与我之前提出的问题有关:Hide / Show Multiple Divs

我从上一个问题中获得了代码,除了在“AFTER”下拉列表中更改值后,它似乎正常工作。

我有很多Javascrpts,所以想知道某处是否有冲突?第一个代码位于文档的HEAD中。

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

第二部分代码是表单验证:

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

如果您想测试并查看结果,可以在http://www.faa.net.au/test/femmes-event-rego-form.html找到该页面。

你需要选择1个以上的顾客,然后选择信用卡授权,最后选择“你在哪里听说过我们?”下拉看看会发生什么。

我不明白为什么DIV会在最后一个下拉菜单中更改值后隐藏?

我添加了一个JSFiddle - http://jsfiddle.net/4REan/ - 但是我不能让它正常工作但希望所有的代码都可以帮助吗?

1 个答案:

答案 0 :(得分:1)

付款方式(div)切换功能有轻微的错误。我已经纠正了它,这里的工作正常是修改后的js代码

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;
    }
}
 });

以下是 LIVE DEMO

的js小提琴

我想建议你一件事,无论你想通过jQuery做什么功能,把它们添加到单个“$(document).ready(function(){....}); “或“$(function(){...});” (两种语法都有效),因为我在你的代码中观察到你多次添加了这个,这对于浏览器来说无关紧要,因为它会在正文加载时执行所有操作。但这是编码的不良做法,因为它会增加LOC及其冗余代码。下次要避免。

快乐编码:)