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

发布于 2025-01-02 00:36:01 字数 477 浏览 0 评论 0原文

我创建了一个包含两个表单的 php 页面，但我希望这两个表单都只有一个提交按钮。表单具有 ids firstform & 第二种形式。我尝试过其他脚本，但它们实际上不起作用。

下面是我的代码：

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

原文

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

叫思念不要吵 2025-01-09 00:36:01

您有几个问题

input type=image 是一个提交按钮，因此您尝试从不存在的表单提交某些内容，可能与您所在的页面相同
当您提交 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 typ"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 只是回显您发布的内容。服务器上不需要执行任何特殊操作。

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

暮色兮凉城 2025-01-09 00:36:01

将第一个表单上的“target”属性设置为“_blank”
将第一个表单上的“action”属性设置为“#close”（将“close”替换为您想要的任何内容。
在页面上有一个脚本来检查文档是否如果是 window.close() 则 .location.hash 为“关闭”

这是要演示的 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);
    }
});

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

定格我的天空 2025-01-09 00:36:01

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

WordLookup.html（main/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>

Sorry if this is a little wordy but it's a working example (in chrome 56ish).

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

待天淡蓝洁白时 2025-01-09 00:36:01

此代码使用单个提交按钮成功发布了 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()">

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

~没有更多了~