Question

我有以下代码。我需要查看我的表单中已经检查了多少个复选框，如果有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>

任何帮助将不胜感激。

Answer 1

你的javascript看起来是正确的。我认为唯一需要做的就是 if（totalChecked＆gt; 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;
}

Answer 2

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

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

如何禁用表单提交并检查表单

3 个答案: