Targeting a button's form
Did you know that you could target a different form from a button which is inside another 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
Comments
Join the discussionNo comments yet. Be the first to comment.





