表单提交不断循环答案

【问题标题】：Form submit keeps looping表单提交不断循环
【发布时间】：2012-06-22 17:10:18
【问题描述】：

P这是应该发生的事情：

单击按钮时，表单的提交被禁用。然后运行文本交换。文本交换完成后，cancel的var切换为false，然后提交表单。

问题是一旦 form.submit() 触发，它就会循环，并且文本会不断地淡入淡出。这也会导致表单无法提交。

<script type="text/javascript">
    var cancel = true;

    $("#btn-submit").click(

    function () {
        if (cancel == true) {
            $('form').on('submit', function (ev) {
                ev.preventDefault();
                form = $(".submit-form");
                fp = $('#free-planner');
                fp.fadeOut(350, function () {
                    fp.text('Check your email!');
                });
                fp.fadeIn(350, function () {
                    cancel = false;
                    if (cancel == false) {
                        form.submit();
                    }
                });
            });

        }
    });
</script>

【问题讨论】：

如果您取消其默认操作（submit），您的表单如何提交？ )
@raina77ow 这似乎是form.submit() 的目标。这会在首先应用用户所需的提交逻辑后触发提交表单的事件。

标签： javascript jquery html

【解决方案1】：

您通过将 cancel 变量设置为 false 来创建循环，然后声明只要它为 false，就提交表单。

尝试以下方法：

var cancel = true;

$("#btn-submit").click(function () {
    if (cancel == true) {
        form = $(".submit-form");
        fp = $('#free-planner');
        fp.fadeOut(350, function () {
            fp.text('Check your email!');
        });
        fp.fadeIn(350, function () {                                       
            if (cancel == true) { 
               cancel = false;           
               form.submit();                     
            }                 
        });
    }
});

这会稍微修改您的逻辑，以检查取消变量是否未从其原始状态修改为 true，然后将状态修改为 false，然后提交表单。这导致表单只提交一次。

另外，如果btn-submit是提交按钮，那么将输入类型更改为button而不是submit，进行此更改意味着您不需要将监听器添加到onSubmit事件中作为按钮本身旨在充当提交事件。这也减少了在事件上调用preventDefault() 的需要，因为在使用form.submit() 触发事件之前不会发生事件。

【讨论】：

我相信这是正确的轨道Rob，btn-submit是提交按钮。我不确定如何以您建议的方式修改 onSubmit 事件。 onSubmit 当前未设置。
使用你的方法修复了循环问题，但是表单仍然没有提交。删除 preventDefault() 会导致表单在函数运行之前自动提交。
@JakePump - 删除 preventDefault() 只是其中的一部分。附加部分是删除 onSubmit() [$('form').on('submit', function (ev) {] 的事件侦听器，并尽可能将输入类型从submit 修改为button。我已经更新了 sn-p 以包含您提供的全部代码。
尤里卡！那是固定它。非常感谢您的帮助@RobB。我只是无法理解它。将类型从提交切换到按钮被证明是我没有想到的关键部分。
@JakePump - 当我想要一个“人造”提交按钮时，我个人总是尝试走这条路，而不必担心默认操作。