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或带input的{{1}}会提交任何和所有祖先type="button/submit"（s）。如果您错过了结束form，浏览器可能会对结束时间感到困惑。你写它的方式看起来应该可以正常工作，但是......

我担心的一件事是在我的CMS上使用单一形式的.NET设置，它将整个页面包装成一个大的形式。 CMS随后会删除我可能手动输入的所有</form>个标记，而且，任何<form>点击都会提交页面表单。也许你有类似的CMS问题？

编辑：

所以看了你的代码......正确的表格似乎在提交：

button/input

他们正确记录。正确的表单正在提交，但似乎您的$('#physicians_form').on('submit',function(){ console.log('physicians'); }); $('#patients_form').on('submit',function(){ console.log('patients'); });仅验证第一个表单，无论提交哪个表单...我不熟悉validate.js插件，但是可能有一种方法你可以指定哪个按钮应该验证哪个表格？

Answer 2

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

将按钮放在表单中。大多数人这样做，但如果你不这样做，它可能会在页面上提交第一个表单。确保您的<input type=是提交，而不是按钮。
使用这样的按钮，<input type="button" onclick="document.forms[1].submit()"/>将在页面上提交第二个表单。保持JS从0开始计算。使用document.forms[0].submit()将提交第一个表单。

希望这有帮助！

提交按钮提交错误的表单

2 个答案:

编辑：