提交按钮提交错误的表单

Question

我在同一页面上有两个表单，如下所示：

<section class="login_column box" >

    <h3>For patients:</h3>

    <form id="patients_form" name="patients_form" action="<?php echo $_SERVER['REQUEST_URI'] ?>" method="POST">

    <fieldset>

        <p><label for="patient_login">Email:</label><input type="text" id="patient_login" name="patient_login" placeholder="Email" value="" required></p>

        <p><label for="patient_password">Password:</label><input type="password" id="patient_password" name="patient_password" placeholder="Password" value="" required></p>

        <p><label></label><button id="patients" style="margin-top:17px;" name="patients" type="submit">&nbsp;&nbsp;&nbsp;Login&nbsp;&nbsp;&nbsp;</button></p>

    </fieldset>

    </form>

</section>


<section class="login_column box">

    <h3>For physicians:</h3>

    <form id="physicians_form" name="physicians_form" action="<?php echo $_SERVER['REQUEST_URI'] ?>" method="POST">

    <fieldset>

        <p><label for="physician_login">Email:</label><input type="text" id="physician_login" name="physician_login" placeholder="Email" value="" required></p>

        <p><label for="physician_password">Password:</label><input type="password" id="physician_password" name="physician_password" placeholder="Password" value="" required></p>

        <p><label></label><button id="physicians" name="physicians" style="margin-top:17px;" value="Login" type="submit">&nbsp;&nbsp;&nbsp;Вход&nbsp;&nbsp;&nbsp;</button></p>

    </fieldset>

    </form>

</section>

当某些提交按钮被按下时，第一个表单被提交，即使第二个提交按钮可能被按下。如何保证每个提交按钮只提交自己的表单？

Answer 1

因此，默认情况下，无类型的button 或带有type="button/submit" 的input 将提交任何和所有祖先form(s)。如果您错过了结束</form>，浏览器可能会对结束的时间感到困惑。您编写它的方式看起来应该可以正常工作，但是...

我头疼的一件事是在我的 CMS 上使用单一形式的 .NET 设置，它将整个页面包装成一个大表单。 CMS 随后会删除我可能手动放入的任何<form> 标签，并且任何button/input 点击都会提交页面表单。也许你有一些这样的 CMS 问题？

编辑：

所以查看了您的代码...似乎正在提交正确的表单：

$('#physicians_form').on('submit',function(){ console.log('physicians'); });
$('#patients_form').on('submit',function(){ console.log('patients'); });

他们正确记录。正确的表单正在提交，但您的validate.js 似乎只验证第一个表单，无论提交哪个表单...我不熟悉validate.js 插件，但也许有一种方法可以指定哪个按钮应该验证哪个表单？

Answer 2

这是一个常见问题，有两种简单的方法可以解决。

1. 将按钮放在表单中。大多数人都这样做，但如果你不这样做，它可能会提交页面上的第一个表单。确保您的<input type= 是提交，而不是按钮。

2. 使用这样的按钮，<input type="button" onclick="document.forms[1].submit()"/> 将提交页面上的第二个表单。请记住，JS 从 0 开始计数。使用 document.forms[0].submit() 将提交第一个表单。

希望这会有所帮助！