Javascript 如何禁用表单提交和检查表单_Javascript

Javascript 如何禁用表单提交和检查表单

javascript

Javascript 如何禁用表单提交和检查表单,javascript,Javascript,我有以下代码。我需要查看在我的表单中选中了多少复选框，是否有4个或更少的复选框提交表单，以及是否有更多复选框显示错误和不提交 function SetHiddenFieldValue() { var checks = document.getElementById('toppings').getElementsByTagName('input'); var toppings = new Array(); var randomNumber = Math.floor((Ma

我有以下代码。我需要查看在我的表单中选中了多少复选框，是否有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;
    }

函数SetHiddenFieldValue（）
{
var checks=document.getElementById（'toppings'）.getElementsByTagName（'input'）；
var toppings=新数组（）；
var randomNumber=Math.floor（（Math.random（）*9000）+100）；
var totalChecked=0；
var itemPrice=5.99；
对于（i=0；i4）{
提醒（“最多只能选择4种配料”）；
}否则{
itemPrice=itemPrice+（总检查数*0.99）；
document.getElementById（'my-item-name'）。value=toppings.join（“\t”）；
document.getElementById（'my-item-id'）。值=随机数；
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>

任何帮助都将不胜感激。

您的函数需要返回

false

以取消提交或

true

以继续。这就是为什么您的

onsubmit

表单属性设置为

“return XXX（）”

而不仅仅是

“XXX（）”的原因

您的函数需要返回

false

以取消提交，或返回

true

以继续。这就是为什么您的

onsubmit

表单属性设置为

“return XXX（）”

而不仅仅是

“XXX（）”的原因

您的javascript看起来是正确的。我认为您只需要在if（totalChecked>4）语句中返回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;
}

您的javascript看起来是正确的。我认为您只需要在if（totalChecked>4）语句中返回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;
}

如前所述，您应该从check函数返回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>


比萨饼订购单
函数SetHiddenFieldValue（）{
var totalChecked=0；
var itemPrice=5.99；
var toppings=新数组（）；
var randomNumber=Math.floor（（Math.random（）*9000）+100）；
var checks=document.getElementsByName（'topping'）；
对于（i=0；i4）{
提醒（“最多只能选择4种配料”）；
返回false；
}
否则{
itemPrice=itemPrice+（总检查数*0.99）；
document.getElementById（'my-item-name'）。value=toppings.join（“\t”）；
document.getElementById（'my-item-id'）。值=随机数；
document.getElementById（'my-item-price'）。value=itemPrice；
返回true；
}
}
意大利 辣味 香肠
番茄
蘑菇
辣椒
橄榄

如前所述，您应该从检查功能返回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>


比萨饼订购单
函数SetHiddenFieldValue（）{
var totalChecked=0；
var itemPrice=5.99；
var toppings=新数组（）；
var randomNumber=Math.floor（（Math.random（）*9000）+100）；
var checks=document.getElementsByName（'topping'）；
对于（i=0；i4）{
提醒（“最多只能选择4种配料”）；
返回false；
}
否则{
itemPrice=itemPrice+（总检查数*0.99）；
document.getElementById（'my-item-name'）。value=toppings.join（“\t”）；
document.getElementById（'my-item-id'）。值=随机数；
document.getElementById（'my-item-price'）。value=itemPrice；
返回true；
}
}
意大利 辣味 香肠
番茄
蘑菇
辣椒
橄榄

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