How to send 2 forms on one page using one submit button

Question

How to send 2 forms on one page using one submit button

I created a php page with two forms, but I would like to have only one submit button for both forms. forms have firstform and secondform . I tried other scripts but they really don't work.

Here is my code below:

 <script language="javascript"> submitForms = function(){ document.getElementById("firstform").submit(); document.getElementById("secondform").submit(); } </script> <input type="image" src="images/order-button.png" name="button" value="Submit" onclick="submitForms()"/>

+7

javascript html

user1176151 Feb 01 '12 at 13:23

source share

4 answers

Set the "target" attribute in the first form to "_blank"
Set the "action" attribute in the first form to "#close" (replace "close" with whatever you want.
You have a script on the page that checks if document.location.hash is "closed" if it is window.close ()

Here's jsfiddle to demonstrate.

http://jsfiddle.net/TqhPr/18/

HTML

 <form id="f1" name="f1" target="_blank" method="POST" action="#close"> <input type="hidden" value="1" /> <input type="submit" id="s1" value="11" /> </form> <hr/> <form id="f2" name="f2" method="POST" action="#second_form"> <input type="hidden" value="2" /> <input type="submit" id="s2" value="22" /> </form> <hr/> <input type="button" id="both" value="Submit Both Forms" />

Javascript

 $(document).ready(function() { $("#both").click(function() { document.getElementById("f1").submit(); document.getElementById("f2").submit(); }); if(document.location.hash == "#close") { alert("closing the window caused by posting the first form"); window.close(); } if(document.location.hash) { alert(document.location.hash); } });

+3

Louis ricci Feb 01 '12 at 14:01

source share

I used this for a similar problem. I wanted to create one page to query multiple sites and view their results side by side:

WordLookup.html (main / main / frame entry point):

 <html> <head> <title>Word Lookup</title> </head> <frameset cols="33%,34%,33%"> <frame src="" name="DIC"> <frameset rows="21,*"> <frame src="frame.html" name="PRF"> <frame src="" name="MW"> </frameset> <frame src="" name="TFD"> </frameset> </html>

and then this is for frame.html (javascript method):

 <html> <head> <style> body { margin: 0; background-color: #AAAAAA; } table, td { padding: 0; border-collapse: collapse; margin-left: auto; margin-right: auto; } form { padding: 0; margin: 0; } </style> <script> function submitForms(){ var x = document.getElementById("search3").value; document.getElementById("fr1").setAttribute("value", x); document.getElementById("DIC").submit(); document.getElementById("fr2").setAttribute("value", x); document.getElementById("MW").submit(); document.getElementById("fr3").setAttribute("value", x); document.getElementById("TFD").submit(); document.getElementById("search3").value = ""; } </script> </head> <body> <table> <tr> <td> <input id="search3" type="text" placeholder="3x Search" onclick="value=''" onkeydown="if (event.keyCode == 13) {submitForms()}" autofocus="1"> </td> <td> <form action="http://www.dictionary.com/dic" target="DIC" id="DIC"> <input id="fr1" name="q" type="hidden" placeholder="Dictionary" onclick="value=''"> </form> </td> <td> <form action="https://www.merriam-webster.com/dictionary" target="MW" id="MW"> <input id="fr2" name="s" type="hidden" placeholder="Merriam-Webster" onclick="value=''"> </form> </td> <td> <form action="//www.thefreedictionary.com/_/search.aspx" target="TFD" id="TFD"> <input id="fr3" name="word" type="hidden" placeholder="TheFreeDictionary" onclick="value=''"> </form> </td> </tr> </table> </body> </html>

Sorry if this is a bit verbose, but this is a working example (in chrome 56ish).

0

Zeibee Jan 01 '18 at 10:58

source share

This code successfully posted 2 data forms with one submit button.

 <SCRIPT LANGUAGE="JavaScript" type="text/javascript"> /* Collect all forms in document to one and post it */ function submitAllDocumentForms() { var arrDocForms = document.getElementsByTagName('form'); var formCollector = document.createElement("form"); with(formCollector) { method = "post"; action = "test.php"; name = "formCollector"; id = "formCollector"; } for(var ix = 0 ; ix < arrDocForms.length ; ix++) { appendFormVals2Form(arrDocForms[ix], formCollector); } document.body.appendChild(formCollector); formCollector.submit(); } /* Function: add all elements from frmCollectFrom and append them to frmCollector before returning frmCollector*/ function appendFormVals2Form(frmCollectFrom, frmCollector) { var frm = frmCollectFrom.elements; for(var ix = 0 ; ix < frm.length ; ix++) frmCollector.appendChild(frm[ix]); return frmCollector; } </SCRIPT> <FORM METHOD=POST ACTION="test.php" NAME="form1" id="form1"> <INPUT TYPE="text" NAME="box1" size="20" > </FORM> FORM2: <FORM METHOD=POST ACTION="test.php" NAME="form2" id="form2"> <INPUT TYPE="text" NAME="box2" size="20" > </FORM> <INPUT TYPE="button" value="Submit Form 1 & 2" onClick="submitAllDocumentForms()">

-1

user1176151 Feb 02 '12 at 8:46

source share

mplungjan · Accepted Answer · 2012-02-01T13:59:33+0000

You have some problems

input type = image is a submit button, so you are trying to send something from a non-existent form, probably on the same page you are on
when you submit form1, it replaces the current page, if you manage to submit form2, this VERY can prevent sending form1

Here is what you can try (plain javascript):

 <script language="javascript"> function() submitForms{ document.getElementById("firstform").submit(); document.getElementById("secondform").submit(); } </script> <form id="firstform" target="iframe1"> </form><iframe name="iframe1" style="display:none"></iframe> <form id="secondform" target="iframe2"> </form><iframe name="iframe1" style="display:none"></iframe> <button onclick="submitForms()"><img src="images/order-button.png" "/></button>

As an alternative to AJAX forms one at a time (assuming jQuery is loaded)

DEMO HERE

 $(document).ready(function() { $("#subbut").click(function(e) { e.preventDefault(); // or make the button type=button $.post($("#firstform").attr("action"), $("#firstform").serialize(), function() { $.post($("#secondform").attr("action"), $("#secondform").serialize(), function() { alert('Both forms submitted'); }); }); }); });

UPDATE: If you want two form contents to be submitted in one action, just add serialization:

 $(document).ready(function() { $("#subbut").click(function(e) { e.preventDefault(); // or make the button type=button $.post($("#firstform").attr("action"), $("#firstform").serialize()+$("#secondform").serialize(), function() { alert('Both forms submitted'); }); }); });

PS: PHP in the demo just repeats what you publish. No special action is required on the server.

How to send 2 forms on one page using one submit button

More articles: