layui 如何动态加载局部页面_今天，学一下动态增删form表单

点击上方“蓉李纪”，关注订阅更多优质内容

后台回复"加群"，加入技术交流群一起进步

前言

Hi，大家好，我是麦叔。今天老大让我做一个需求，我们的这个表单以前只支持录入一个检查器具。现在要求改为可以动态添加，满足录入多个器具。作为前端小菜的我来说，也是折腾了半天。在朋友的帮助下算是搞定了，顺利下思路，希望能帮到有需要的人。

效果图

首先，我们来看看效果图，点击“+”按钮，我们可以动态添加「检查器具信息」表单，理论上无限次动态添加。点击删除按钮，我们可以删除动态添加的表单。

实现思路

页面

首先我们来页面方面

页面基本就是「form」表单基本写法，但是这里有一个细节，采用了嵌套form表单，分别是 id="applyForm" 和 id="checkBody0" 的表单。

为什么要采用嵌套form表单?我们将需要动态添加的内容放到子form表单，可以利用Jquery.serializeArray()方法快速获取每个动态添加的form表单的值。

<div class="medical_treatment">

动态添加

动态添加过程中需要注意的问题：

• 动态添加的form表单id要唯一，方面后期获取表单值
• 动态添加的form表单input置为空
• 删除按钮不能出现在第一个子form表单

/**
     * 克隆form
     */

我们来看看添加后的html页面

动态删除

/**
 * 删除from
 */

表单提交

因为我们的页面是嵌套form表单，问题的难点就是如何获取动态添加子表单的值，我们是利用在动态添加时候设置的id来判断，所以要保证id具有规律性。

function saveMedical() {

处理后的数据：这里的name要和后台实体中的字段一一对应

后台代码

MedicalApply实体中的字段和form表单提交的name一直，利用@ModelAttribute进行绑定

@ResponseBody

小结

本文主要介绍了利用Jquery的**clone()**方法来实现表单的动态增删，希望对有需要的伙伴有帮助。

一次代码评审，差点过不了试用期！ 2020-09-21 如何判断一个请求是否是Ajax异步请求 2020-09-18 为什么HTTPS是安全的? 2020-09-14

点个在看支持我吧，转发就更好了