Skip to main content

Targeting a button's form

Did you know that you could target a different form from a button which is inside another form ?

Published 1 min readMarkdown
Targeting a button's form

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>

About the author

  • I am a web developer from Navi Mumbai. Mainly dealt with LAMP stack, now into Django and getting into Laravel and Cloud. Founder of nerul.in and gaali.in

No comments yet. Be the first to comment.