2

我有以下表格：

    <form id="squatsForm"> 
        {% csrf_token %}
        <input type="text" name="amount" id="squatsVal" value="Squats" />
        <input type="hidden" name="exercise" value="squats" />
        <input type="submit" id="submitSquats" value="Add Squats"/><br />
    </form>

我想验证表单，然后通过 Ajax 以该表单发送数据以进行进一步处理。我正在尝试使用submitHandler，因此表单不会执行使用 POST 请求加载新页面的默认操作，而是触发我的 Ajax 函数：

$(document).ready(function() {
    $('#squatsForm').validate({
        rules: {
            amount: {
                required: true,
                number: true    
               }   
            },  
        submitHandler: function(form) {
            $.post(
                "submitWorkout1",
                form.serialize(),
                function(data) {
                    var jsonData = $.parseJSON(data);
                    $("#squats").html(jsonData['amount']);
                }); 
            }   
        });

但是，当我尝试使用表单输入数据时，它会重新加载页面并且不执行 Ajax 请求。

在我实施验证之前，我的 Ajax 请求运行良好。

4

2 回答 2

4

它是否验证您的表格？

我没有足够的声誉来对您的问题发表评论，否则我只会问您是否只是忘记结束准备好的功能，或者只是在复制粘贴时错过了它。

我使用了您的代码并确认它没有运行。当我点击Add Squats按钮时，它只是重新加载页面，而不管我在金额字段中是否有正确的值。

但是，当我});在代码末尾添加 a 以正确结束 时$(document).ready(function () {，它起作用了！

它执行验证并触发我作为第一条语句放在submitHandler.

    $(document).ready(function () {
        $('#squatsForm').validate({
            rules: {
                amount: {
                    required: true,
                    number: true
                }
            },
            submitHandler: function (form) {
                $.post(
                            "submitWorkout1",
                           form.serialize(),
                           function (data) {
                               var jsonData = $.parseJSON(data);
                               $("#squats").html(jsonData['amount']);
                           }
                      );
            }
        });
    });

我希望您的问题的解决方案就像ready正确结束函数一样简单。如果不是，让我们一起进一步调试！让我知道。

于 2013-03-24T20:41:22.023 回答
0

用 jquery 函数在 submitHandler 函数中包装“form”变量将修复它

$(document).ready(function() {
    $('#squatsForm').validate({
        rules: {
            amount: {
                required: true,
                number: true    
               }   
            },  
        submitHandler: function(form) {
            $.post(
                "submitWorkout1",
                $(form).serialize(),
                function(data) {
                    var jsonData = $.parseJSON(data);
                    $("#squats").html(jsonData['amount']);
                }); 
            }   
        });

请看这个答案： https ://stackoverflow.com/a/10861735/1497042

于 2013-07-05T16:51:50.780 回答