jquery - 在表单提交/按钮单击上创建动态 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. 点击函数

   $('#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 帖子发送到服务器
   • 在服务器端准备标记并回显结果
   • appendd()/html()成功时收到数据

3. 单击按钮追加新行表单元素来填充它们<-与上图有点不同，但仍然比空槽好

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

Answer 1

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

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

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

我在这里提供了一个快速示例:JSFiddle