Submit button submits the wrong form

Question

I have two forms on the same page like this:

<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>

When some of the submit buttons is pressed the first form is submitted even though that the second submit button may be pressed. How to ensure that each submit button submits only its own form?

Answer 1

So typically, a typeless button, or an input with type="button/submit" will, by default, submit any and all ancestor form(s). If you are missing a closing </form>, the browser may be confused about when it ends. The way you have it written looks like it should work correctly, but...

One thing I have headaches with is using a single-form .NET setup on my CMS that will wrap the entire page in one big form. The CMS subsequently strips any <form> tags I may manually put in, and also, any button/input click will submit the page form. Maybe you have some CMS issues like that?

Edit:

So looked at your code... the correct form seems to be submitting:

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

They log correctly. The correct form is submitting, but it seems your validate.js is only validating the first form no matter which form is submitted... I'm not familiar with the validate.js plugin, but is there perhaps a way you can designate which button should validate which form?