如何使用javascript禁用表单下拉选项

时间:2012-01-31 03:43:42

标签: javascript forms validation

我试图禁用"名称"表单中的文本字段"选择"在页面加载后选择下拉(当页面加载时它被禁用),即在我选择禁用或启用该字段的其他两个选项之一后,当我回到"选择"我想要禁用相同的字段。我无法理解为什么我写的javascript会阻止这种情况发生。谢谢!

                          

        <script type="text/javascript">

    function clickclear(thisfield, defaulttext) {
        if (thisfield.value === defaulttext) {
            thisfield.value = "";
        }
    }

    function clickrecall(thisfield, defaulttext) {
        if (thisfield.value === "") {
            thisfield.value = defaulttext;
        }
    }

    function checkPickup() {

        if (form.os0.value != "Pickup from Toowong, Brisbane" ) {
            form.name.disabled = false; form.name.style.color = '#333';

        } else {

            form.name.disabled = true; form.name.style.color = '#CCC';
            /* Reset form values */
            form.name.value = "His/her name";
        }
    }
</script>

<script type="text/javascript">
    function validate(form) {

        var errmsg = "Oops, you're required to complete the following fields! \n";

        // Various other form validations here

        // Validate "Pickup"
        if (form.os0.value === "") {
            errmsg = errmsg + " - Choose pickup or delivery\n";
        }

        // Validate "phone"
        if (form.phone.value === "" || form.phone.value === "Mobile's best!") {
            errmsg = errmsg + " - Your phone number\n";
        }


        if (form.os0.value != "Pickup from Toowong, Brisbane") {

            // Validate "name"
            if (form.name.value === "" || form.name.value === "His/her name") {
                errmsg = errmsg + " - His/her name\n";
            }
        }

        // Alert if fields are empty and cancel form submit
        if (errmsg === "Oops, you're required to complete the following fields! \n") {
            form.submit();
        } else {
            alert(errmsg);
            return false;
        }
    }
</script>
    </head>
    <body>
        <form name="form" action="https://www.paypal.com/cgi-bin/webscr" method="post" onSubmit="return validate(form)">

            <p class="row">
                <input type="hidden" name="on0" value="Pickup and delivery" />Pickup and delivery<br />
                <select name="os0" onchange="checkPickup()">
                    <option value="" selected >Choose</option>
                    <option value="Pickup from Toowong, Brisbane">Pickup from Toowong, Brisbane $1.00 AUD</option>
                    <option value="Brisbane +$23.60">Brisbane +$23.60 =$1.00 AUD</option>
                </select>
            </p>
            <p class="row">Your daytime phone number<br />
                <input type="text" name="phone" value="Mobile's best!" onclick="clickclear(this, 'Mobile\'s best!')" onblur="clickrecall(this,'Mobile\'s best!')" />
            </p>
            <p class="row">Recipient's name<br />
                <input style="color: #ccc" class="name" type="text" name="name" value="His/her name" onclick="clickclear(this, 'His/her name')" onblur="clickrecall(this,'His/her name')" disabled />
            </p>
            <input name="custom" type="hidden"  />
            <input type="hidden" name="currency_code" value="AUD" />
            <input class="button" type="image" src="https://www.paypalobjects.com/en_AU/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="PayPal — The safer, easier way to pay online." />
            <img alt="" border="0" src="https://www.paypalobjects.com/en_AU/i/scr/pixel.gif" width="1" height="1"> -->
        </form>
    </body>
</html>

2 个答案:

答案 0 :(得分:0)

这可能是对您所写内容的一个简单误解:

if (form.os0.value != "Pickup from Toowong, Brisbane" ) {
    form.name.disabled = false; form.name.style.color = '#333';
} else {
    form.name.disabled = true; form.name.style.color = '#CCC';
    //
}

用简单的英语翻译成以下内容:

  

如果值为 NOT "Pickup from Toowong, Brisbane",请启用该字段,否则将其禁用。

相当于:

  

在值为"Pickup from Toowong, Brisbane"时禁用该字段。

我相信您正在寻找的逻辑是:

if (form.os0.value == "Brisbane +$23.60" ) {
    form.name.disabled = false; form.name.style.color = '#333';
} else {
    form.name.disabled = true; form.name.style.color = '#CCC';
    //
}

尽管由于特定案例的参与而使用switch语句对此进行编码可能更为漂亮。

答案 1 :(得分:0)

你打算输入double等于(==)还是三倍等于(===)问题中的拼写错误?基于查看您的代码,我认为您需要一个等于(==)而不是三元组的双精度数。我认为三联可能意味着别的东西。