Question

所以，我有一个表格，即

 <form method="post" action="url" blah blah blah">
 <input type="text" name="dollars" id="dollars">
 <input type="text" name="cents" id="cents">
 <input id="checkout" type="submit">
 </form>

但是，如果“美元和美分”不符合某些标准，我希望表单停止而不提交，所以我输入了以下jQuery：

$(document).ready(function () {
    $('#checkout').click(function () {
        //set variables
        var dollars = $('#dollars').val();
        var cents = $('#cents').val();

        if (dollars < 5 || cents < 5) {
            alert("You can't do that.");
            return false;
        }
    });
});

虽然警报工作正常，但表单仍然提交。如果表单未提交，我该怎么办？

Answer 1

工作演示 http://jsfiddle.net/5ByNn/

e.preventDefault(); - http://api.jquery.com/event.preventdefault/

e.preventDefault(); api将帮助您防止默认行为，您可以放弃yopur所需的行为。

希望这能满足您的需求:)

<强>码

  $('#checkout').click(function (e) {
         e.preventDefault();
         //set variables
         var dollars = $('#dollars').val();
         var cents = $('#cents').val();

         if (dollars < 5 || cents < 5) {

             alert("You can't do that.");
             return false;

         }

     });

html 缺少一些结束标记

<form action="post">
    <input type="text" name="dollars" id="dollars" />
    <input type="text" name="cents" id="cents" />
    <input id="checkout" type="submit" />
</form>

Answer 2

您也可以这样做，因为有些人建议按原样保留提交按钮。

$("form_reference").submit(function(){
    // return result depending on your condition
    // true or false
    return false;
});

Answer 3

如果用户不满足条件，您可以向disabled添加属性checkout。

Answer 4

See jsFiddle Demo

不要监听click个事件，而是监听submit事件（在表单上）。这样，您的return false承担了取消表单提交的双重职责。但为了进一步缓解您的疑虑，您还可以preventDefault处理触发处理程序时的事件。

此外，由于#dollars和#cents引用了文本框，val正在返回字符串。在使用parseInt进行比较之前，请将它们设为整数。

$(function () {
    $('form').submit(function (e) {

        var dollars = $('#dollars').val();
        var cents = $('#cents').val();

        // convert to ints, but default to 0
        dollars = (dollars ? parseInt(dollars, 10) : 0);
        cents = (cents ? parseInt(cents, 10) : 0);

        if (dollars < 5 || cents < 5) {
            e.preventDefault();
            alert("You can't do that.");
            return false;
        }
    });
});

Answer 5

Your code工作正常，您可以从演示中看到，在警报窗口中单击“确定”后表单未提交，但我宁愿在表单上使用submit事件，传递event对象并使用event.preventDefault()

DEMO

<form method="post">
 <input type="text" name="dollars" id="dollars">
 <input type="text" name="cents" id="cents">
 <input id="checkout" type="submit">
 </form>


$(document).ready(function () {
    $('#checkout').closest('form').on('submit',function (e) {
        //set variables
        var dollars = $('#dollars').val();
        var cents = $('#cents').val();

        if (dollars < 5 || cents < 5) {
            e.preventDefault();
            alert("You can't do that.");
        }
    });
});

停止提交表格

5 个答案: