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

问题描述

我用两种形式创建了一个php页面，但我希望这两种表单都只有一个提交按钮。表格中有 id s firstform & secondform 。我已经尝试过其他脚本，但它们并没有真正起作用。

以下是我的代码：

 < script language =javascript> 
 submitForms = function（）{
 document.getElementById（firstform）。submit（）; 
 document.getElementById（secondform）。submit（）; 
} 
 
< / script> 
 
< input type =imagesrc =images / order-button.pngname =buttonvalue =Submitonclick =submitForms（）/> 
  

解决方案

1. 输入类型=图片是一个提交按钮，因此您尝试从不存在的表单提交内容，可能与您所在的页面相同




2. 当您提交form1时，它会替换当前页面，如果您也设法提交form2，则很可能会干扰form1的提交

以下是您可以尝试的内容（纯javascript）：

 < script language =javascript> 
 function（）submitForms {
 document.getElementById（firstform）。submit（）; 
 document.getElementById（secondform）。submit（）; 
} 
< / script> 
 
< form id =firstformtarget =iframe1> 
< / form>< iframe name =iframe1style =display：none>< / iframe> 
< form id =secondformtarget =iframe2> 
< / form>< iframe name =iframe1style =display：none>< / iframe> 
< button onclick =submitForms（）>< img src =images / order-button.png/>< / button> 
  

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

  $（document）.ready（function（）{
 $（＃subbut）。click（function（）{
 $ .post（$（＃firstform）。attr（action ），$（＃firstform）。serialize（），
函数（）{
 $ .post（$（＃secondform）。attr（action），$（＃ （），
}）; 
}）; 
 alert（'Both forms submitted'）; 
}）; 
}）; 
））; 
  

---

UPDATE：If你需要将两个表单的内容提交给一个动作，只需添加序列：

  $（document）.ready（function（ ）{
 $（＃subbut）。click（function（）{
 $ .post（$（＃firstform）。attr（action），$（＃firstform）。serialize（）+ $（＃secondform）。serialize（），
 function（）{
 alert（'Both forms submitted'）; 
}）; 
}）; 
}）; 
  

PS：演示中的PHP只是回应您发布的内容。在服务器上不需要特殊的操作。

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

解决方案

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 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() {
        $.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() {
        $.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.

这篇关于如何使用单个提交按钮在一个页面中提交2个表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！