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

后端未结

关注

 4  1089

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 &

相关标签:

4条回答

旧巷少年郎

2020-11-28 12:41

You have SEVERAL issues

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
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.

0 讨论(0)

花落未央

2020-11-28 12:52

This code successfully posted 2 forms data with single 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()">

0 讨论(0)

情歌与酒

2020-11-28 12:55

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

WordLookup.html (main/home/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 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 little wordy but it's a working example (in chrome 56ish).

0 讨论(0)

野趣味

2020-11-28 12:59

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);
    }
});

0 讨论(0)