How can two forms share the same inputs? I have two forms, one for two different paths... if i wanted to get the user to enter their name, but only once.... how could both forms get hold on this field?
4 Answers
In HTML5 you could do it without JavaScript. Do one form with one set of inputs, and just make two submit buttons using a different formaction attributes found on Mozilla Developer Network like this:
<form> <input name="fname" type="text" /> <input type="submit" value="button one" formaction="script_one.php"> <input type="submit" value="button two" formaction="script_two.php"> </form> 
Comments
Using JavaScript you could set one field's value to another's.
Something like:
document.form2.input.value = this.value; Put that code in the onblur event for your first form.
So:
<form name="form1"> <input type="text" name="input" onblur="document.form2.input.value = this.value;" /> </form> <form name="form2"> <input type="text" name="input" onblur="document.form1.input.value = this.value;" /> </form> 
3 Comments
tarnfeld
was hoping to do this without JS but what they hey :)
Waleed Amjad
Unfortunately there is no other way, I've edited my post to include a copy-paste example.
Charlie G
Hold on. The w3schools textarea page says (in a simplified way)
Element=textarea, Attribute=form, Value=form_id, Description="Specifies one or more forms the text area belongs to" Why isn't it possible to specify a list of forms? It would solve my current problem a lot @WaleedAmjadI know this is a late reply, but I found the thread looking for an answer, so...
@CharlieG had a suggestion that should get more merit, despite the comment from @4castle which is only partially correct (you CAN only specify one form... at a time).
You can change an input's form association dynamically with javascript using .setAttribute.
document.getElementById("SharedInput").setAttribute("form","form_" + TabName); For example, I use this with a page with multiple "tabs" that has some common information between them.
Comments
if you're working with go and the above examples aren't good enough try the below combination of java and html. Inside your HTML file add the following script inside it, then use a form called Form1 to trigger an action to the page you want base on the button.
<!DOCTYPE html> <html> <script type="text/javascript"> function OnButton1() { document.Form1.action = "/first_page.html" document.Form1.submit() } function OnButton2() { document.Form1.action = "/second_page.html" document.Form1.submit() } </script> <body> <form name="Form1" method="POST"> Your Name <input type="text" name="text1" value=""> <button type="submit" value="Button1" name="button1" onclick="return OnButton1();">Button1<button> <button type="submit" value="Button2" name="button2" onclick="return OnButton2();">Button2<button> </form> </body> </html>
formattribute can only specify one form. It cannot be used for this.