一、在 Form 表单中动态新增、删除项目
在 Web 开发中,使用 form 表单提交数据大家一定不会陌生。但有时表单项数量并不是固定的,比如我们要提交一个人员信息列表,人员数量不定,填写完毕后一次性提交。这就要求表单可以动态地增加或删除输入项。
1,效果图
(1)页面初始化后默认有两个表单项(两个输入框)。
(2)点击“新增一项”按钮,则在末尾添加一个新的输入条目。
(3)点击“删除”按钮则将对应的输入条目给删去。
(4)点击“提交”按钮则将表单中所有的项目进行提交。
2,样例代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 |
|
3,运行效果
这里我新增一个条目,一个提交 3 条数据。从捕获的请求可以看到,3 条数据都已成功提交。
二、动态新增项目的数据无法提交问题
可能有人碰到数据丢失问题,明明新增的 input 元素是在 Form 内部,界面上也能显示,可提交的时候这个 input 数据却带不过去。下面通过样例进行解释。
1,问题样例
可能有人喜欢表单使用 table 进行布局。比如我们在 form 外包裹个 table,然后动态新增的项目插入到 td。具体代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
|
这次我们同样提交3条数据(默认两个,新增一个)。抓取数据后发现,新添加的那个表单项数据并没有随表单一起提交。
2,问题解决
这个问题比较奇葩。我们将 form 与 table 层次调整下便能解决问题,将原来的 table 包裹 from,改成 form 包裹 table 即可。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
|
原文出自:www.hangge.com 转载请保留原文链接:http://www.hangge.com/blog/cache/detail_1650.html