javascript - 如何禁用表单提交和检查表单

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 看起来是正确的。我认为您唯一需要做的就是 return false; 在您的 if (totalChecked > 4) 语句中。

编辑:这是要修改的 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;
}