How to submit 2 forms in one page with a single submit button

I've created a php page with two forms but I would like to have only one submit button for both forms. the forms have the ids firstform & secondform. I have tried other scripts but they don't really 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()"/>

Solution 1:

You have SEVERAL issues

1. input type=image IS a submit button so you are trying to submit something from a non-existing form, likely the same page you are on

2. when you submit form1, it replaces the current page, if you manage to submit form2 as well, it is VERY likely to interfere with the submission of 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 typ"button" onclick="submitForms()"><img src="images/order-button.png" "/></button>

Alternatively AJAX the forms one at a time (assumes jQuery 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's content to be submitted to one action, just add the serialises:

$(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: The PHP in the demo is just echoing back what you post. There is no special action needed on the server.

Solution 2:

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

Here's the 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);
    }
});