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>