Question

我有两种形式，可以去不同的地方/服务于不同的目的，但是共存于一个弹出窗口中。一次只能使用一个。第一个表单的按钮仅提交自己（正确），但是第二个表单的按钮同时提交两者：

form.html

<div>
    <form id="form1" action="/onePlace" method="post">
      <button type="submit">Submit</button>
      <!-- Submits form1 -->
    </form>

    <form id="form2" action="/anotherPlace" method="post">
      <button type="submit">Submit</button>
      <!-- Submits form1 and form2 -->
    </form>
</div>

加载到另一个页面

<div id="loadedForm"></div>
<script type="text/javascript">

    // Event fires to reveal in modular dialogue
    function(){
        $('#loadedForm').load('/form'); // Server serves form.html
        $("#promptLoginSignup").lightbox_me({
            centered: true,
            onLoad: function () {
                $(function() {
                    $('#form1').submit(function(event) {
                        event.preventDefault();
                        console.log('form1 submitted'); // Fires on both button presses
                    });
                    $('#form2').submit(function(event) {
                        event.preventDefault();
                        console.log('form2 submitted'); // Fires only on second button press
                    });
                });
            }
        });
    }
</script>

为什么会发生这种情况，如何预防呢？

编辑：更准确地表示我的实际代码并更详细地描述设置。

编辑2澄清说明：此问题在网络服务器上存在，并使用了来自该服务器的资源。不能用摘要或笔复制。仅仅指出它在页面上不可复制这一事实是没有帮助的，显然，这不是可以在单个页面上实际完成的事情，因此不能对“完整”代码示例进行同样的审查。我要给您尽可能多的信息，只要求那些可能拥有一些而不是没有这些的人提供的任何见解。

Answer 1

不会重现该错误，但是您可能要检查的一件事是，第二个提交按钮容器是否覆盖了第一个提交按钮容器，以避免同时提交，请尝试添加event.stopPropagation();

为什么仅单击一个表单的“提交”按钮就提交所有表单？

1 个答案: