Question

我已经创建了一个包含两个表单的php页面，但我希望这两个表单只有一个提交按钮。表单包含id s firstform＆amp; secondform。我尝试过其他脚本，但它们并没有真正起作用。

以下是我的代码：

<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()"/>

Answer 1

您有几个问题

输入类型=图片是一个提交按钮，因此您尝试从不存在的表单提交内容，可能与您所在的页面相同
当你提交form1时，它会替换当前页面，如果你设法提交form2，它很可能会干扰form1的提交

这是你可以尝试（普通的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>

或者AJAX一次一个表单（假设加载了jQuery）

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

更新：如果您希望将两个表单的内容提交给一个操作，只需添加序列号：

$(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只是回显你发布的内容。服务器上不需要特殊操作。

Answer 2

将第一个表单上的“target”属性设置为“_blank”
将第一个表单上的“action”属性设置为“#close”（将“close”替换为您想要的任何内容。
在页面上有一个脚本，用于检查document.location.hash是否为“close”，如果它是window.close（）

这是演示的jsfiddle。

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

Answer 3

我用它来解决类似的问题。我想创建一个页面来查询多个站点并并排查看它们的结果：

WordLookup.html（主/ home / frame入口点）：

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

然后用于frame.html（javascript方法）：

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

很抱歉，如果这有点罗嗦，但这是一个有效的例子（以chrome 56ish为单位）。

Answer 4

此代码使用单个提交按钮成功发布了2个表单数据。

<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()">

如何使用单个提交按钮在一个页面中提交2个表单

4 个答案: