如何禁用表单提交和检查表单答案

【问题标题】：how to disable form submit and check the form如何禁用表单提交和检查表单
【发布时间】：2009-07-13 20:12:40
【问题描述】：

我有以下代码。我需要查看我的表单中有多少个复选框被选中，是否有 4 个或更少的提交表单，如果有更多则显示错误并且不要提交。

function SetHiddenFieldValue() 
{
    var checks = document.getElementById('toppings').getElementsByTagName('input');
    var toppings = new Array();
    var randomNumber = Math.floor((Math.random() * 9000) + 100);
    var totalChecked = 0;
    var itemPrice = 5.99;

    for (i = 0; i < checks.length; i++)
    {
        if (checks[i].checked)
        {
            toppings[i] = checks[i].value;
            totalChecked += 1; 
        }
    }

    if (totalChecked > 4) {
        alert("You can only choose up to Max of 4 Toppings");   
    } else {    
        itemPrice = itemPrice + (totalChecked * 0.99);  
        document.getElementById('my-item-name').value = toppings.join("\t");
        document.getElementById('my-item-id').value = randomNumber;
        document.getElementById('my-item-price').value = itemPrice;
    }

我的表格是：

<form id="pizza" name="pizza" method="post" action="" class="jcart" onsubmit="return SetHiddenFieldValue();">
    <input type="hidden" name="my-item-id" id="my-item-id" value="" />
    <input type="hidden" name="my-item-name" id="my-item-name" value="" />
    <input type="hidden" name="my-item-price" id="my-item-price" value="" />
    <input type="hidden" name="my-item-qty" value="1" />
    <input type="submit" name="my-add-button" value=" add " />
</form>

任何帮助将不胜感激。

【问题讨论】：

标签： javascript

【解决方案1】：

您的 javascript 看起来正确。我认为您唯一需要做的就是在您的 if (totalChecked > 4) 语句中 return false;。

编辑：这是要修改的 javascript 函数部分：

if (totalChecked > 4) {
    alert("You can only choose up to Max of 4 Toppings");   
    return false;
} else {    
    itemPrice = itemPrice + (totalChecked * 0.99);  
    document.getElementById('my-item-name').value = toppings.join("\t");
    document.getElementById('my-item-id').value = randomNumber;
    document.getElementById('my-item-price').value = itemPrice;
    return true;
}

【讨论】：

您好，感谢您的建议，但返回 false 应该在哪里？我尝试使用它，但它不起作用。

【解决方案2】：

您的函数需要返回false 取消提交或返回true 继续。这就是为什么您的onsubmit 表单属性设置为"return XXX()" 而不仅仅是"XXX()"

【讨论】：

【解决方案3】：

如前所述，您应该从检查函数中返回 false 以取消提交，如果检查正常则返回 true。

这样的事情怎么样？

    <html>
    <head>
        <title>Pizza Order Form</title>
    </head>
    <body>
        <script>
            function SetHiddenFieldValue() {
                var totalChecked = 0;
                var itemPrice = 5.99;
                var toppings = new Array();
                var randomNumber = Math.floor((Math.random() * 9000) + 100);
                var checks = document.getElementsByName('topping');

                for (i = 0; i < checks.length; i++) {
                    if (checks[i].checked) {
                        toppings[i] = checks[i].value;
                        totalChecked += 1;
                    }
                }

                if (totalChecked > 4) {
                    alert("You can only choose up to Max of 4 Toppings");
                    return false;
                }
                else {
                    itemPrice = itemPrice + (totalChecked * 0.99);
                    document.getElementById('my-item-name').value = toppings.join("\t");
                    document.getElementById('my-item-id').value = randomNumber;
                    document.getElementById('my-item-price').value = itemPrice;
                    return true;
                }
            }
        </script>
        <form id="pizza" name="pizza" method="post" action="" class="jcart" onsubmit="return SetHiddenFieldValue();">
            <input type="hidden" name="my-item-id" id="my-item-id" value="" />
            <input type="hidden" name="my-item-name" id="my-item-name" value="" />
            <input type="hidden" name="my-item-price" id="my-item-price" value="" />
            <input type="hidden" name="my-item-qty" value="1" />
            <div id="toppings">
                <input type="checkbox" name="topping" id="pepperoni" />Pepperoni
                <input type="checkbox" name="topping" id="tomato" />Tomato
                <input type="checkbox" name="topping" id="mushrooms" />Mushrooms
                <input type="checkbox" name="topping" id="peppers" />Peppers
                <input type="checkbox" name="topping" id="olives" />Olives
            </div>
            <input type="submit" name="my-add-button" value=" Add " />
        </form>
    </body>
</html>

【讨论】：