在表单提交/按钮单击时创建动态html内容而不刷新页面

Question

我有一个表单，我可以在其中定义多个随机数量的人。

相反，我提前准备表单行：

 <div>Person 1: <label>Name:<input type="text"></label> <!-- rest of form elements --></div>
 <div>Person 1: <label>Name:<input type="text"></label> <!-- rest of form elements --></div>
 <div>Person 1: <label>Name:<input type="text"></label> <!-- rest of form elements --></div>
 <div>Person 1: <label>Name:<input type="text"></label> <!-- rest of form elements --></div>
....

我想添加一些互动：

最理想的方法是放置一个额外的表单，用户可以在不重新加载页面的情况下将人员（用于演示的html标记和用于进一步$_POST处理的隐藏输入）添加到表单的现有部分中。

我应该怎么做？

我有三个想法：

1. click function

   $('#addperson').click(function() {
       //take values from form elements
       var $form = $(this).parents('.passengersform')
       var $name = $form.children('input.name').val();
       var $phone ...
       var $type ...
       var $info ...
   
       // append it 
       $('.passengers').append('<div> Here goes visible part of html</div>');
       $form.append('<div>Here goes inputs type hidden for main form submit </div>');
       // clear the form
   });
   

2. 使用AJAX发送/接收数据：

   • 将ajax发送到服务器
   • 在服务器端准备标记并echo结果
   • appendd() / html()成功时获得的数据

3. 点击按钮添加新的表单元素行以填充它们 - 与上图有点不同但仍然比空插槽更好

也许您知道为此目的设计的插件？

Answer 1

在表单中，添加onsubmit属性以返回JavaScript函数。确保在函数中返回false，以便在表单提交后页面不会刷新。

<form onsubmit="return validate();">

在您的JavaScript中，您可以创建一个可以使用Ajax进行验证的函数，然后将其附加到列表中。

我在这里提供了一个快速示例：JsFiddle

请注意，在我的JsFiddle中，我使用jQuery来提交＆＃39;提交＆＃39;事件，因为某些原因，它不适合小提琴。但是，您应该能够使用属性onsubmit =＆＃34; return validate（）;＆＃34;来实现相同的结果。在你的表格上。

Answer 2

我使用纯javascript创建魔法，技巧是你需要控制表单，你可以使用这个按钮来做：

<button class="submit" onclick="return submtBtn()"type="submit">

javascript代码也很吸引人

function submtBtn(){
    var tr="<tr>";
  tr+="<td>"+document.getElementsByName('name')[0].value+"</td>";
  tr+="<td>"+document.getElementsByName('Telephone')[0].value+"</td>";
  tr+="<td>"+document.getElementsByName('Type')[0].value+"</td></tr>";


var table=document.getElementsByTagName('table')[0];

table.innerHTML=table.innerHTML+tr;
console.log(tr);
    return false;
}

您不会因为没有需要而提交表格，而且您已完成工作。这是一个有效的fiddle