一个ajax php页面中有多种不同的形式答案

【问题标题】：Multiple different forms in one ajax php page一个ajax php页面中有多种不同的形式
【发布时间】：2015-08-12 22:31:26
【问题描述】：

由于语言限制，我可能不明白如何向 Google 询问我想要完成的任务，但我希望你能理解。

我有三个表单，我想在同一页面上显示而不刷新。第一个表单向 php 提交操作，php 确定要显示哪个函数（使用另一个表单）。但是按钮会干扰，我离我想做的还很远。

Index.php 应该将用户输入发送到calculator.php，然后根据值打开下一个表单：

<form id="form1" method="post" formaction="calculator.php">
<input id="form1" type="submit" value="Submit" />
<div id="parseSecondForm"></div>

<script type="text/javascript">
$(function(){
$('#form1').on('submit', function(e){
e.preventDefault();
$.ajax({
  type: $(this).attr('method'),
  url: $(this).attr('formaction'),
  data: $(this).serialize(),
  beforeSend: function(){
    $('#parseSecondForm').html('<img src="loading.gif" />');
  },
  success: function(data){
    $('#parseSecondForm').html(data);
  }
});
});
});
</script>

calculator.php 接收用户输入并在 index.php 中的#parseSecondForm div 中回显下一个表单：

if (form1 === '1') {
 echo '
   <form id="form2" method="post" formaction="form2.php">
   <input id="form2" type="submit" value="Submit" />
   <div id="thankyou"></div>
   <!--submit saves php result in MySQL and thanks the user in next div-->
 ';
}
 else {
  echo '
   <form id="form3" method="post" formaction="form3.php">
   <input id="form3" type="submit" value="Submit" />
   <div id="thankyou"></div>
   <!--submit saves php result in MySQL and thanks the user in next div-->
 ';
}

我试图从 index.php 中回显修改后的 javascript，但它只是重置了所有表单。

也许有一些表单脚本指定了原因或任何其他想法我该如何解决这个问题？

【问题讨论】：

您可以隐藏/显示这些不同表单的一部分，然后在最后处理一个提交？
一方面，<form> 和 <input> 的 ID 相同。

标签： php jquery ajax forms

【解决方案1】：

在 Javascript/HTML 中，您不能有两个具有相同 ID 的项目：

<form id="form1" method="post" formaction="calculator.php">
<input id="form1" type="submit" value="Submit" />

form1只能使用一次。

php 动态创建的表单也是如此。

【讨论】：

这并不能真正回答我的问题