I didn't know about this until yesterday but apparently you can target a form's button to another form.

So, there are 2 forms with IDs form-1 and form-2 : form-1's action is post-1.php and form-2's action is post-2.php

So when the Submit 2 button (which is inside form-1) is clicked, it hits form-2 which is post-2.php and not post-1.php

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Button's Form Target</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <fieldset>
        <legend>Form 1</legend>
        <form id="form-1" action="post-1.php" method="post">
            First Name : <input type="text" name="first_name" id="first_name"/>
            <div style="margin-top:10px; display: flex; column-gap: 5px;">
                <button form="form-1">Submit 1</button>
                <button form="form-2">Submit 2</button>
            </div>
        </form>
    </fieldset>
    <br/>
    <fieldset>
        <legend>Form 2</legend>
        <form id="form-2" action="post-2.php" method="post">
            Last Name : <input type="text" name="last_name" id="last_name"/><br/>
        </form>
    </fieldset>    
  </body>
</html>

Targeting a button's form

Subscribe to my newsletter

Anjanesh Lekshminarayanan

Anjanesh Lekshminarayanan