保存动态生成的输入字段(Save dynamically generated input fields)

我正在使用此代码动态生成更多输入字段，然后使用“保存”按钮计划将其值保存在数据库中。挑战是在“保存”按钮上，我想继续显示“用户生成的输入”字段。但是，单击“保存”按钮会刷新它们。

JavaScript的：

HTML：

<form method="post"> <div id="itemRows">Item quantity: <input type="text" name="add_qty" size="4" />Item name: <input type="text" name="add_name" /> <input onclick="addRow(this.form);" type="button" value="Add row" /> </div> <p> <button id="_save">Save by grabbing html</button> <br> </p> </form>

I am using this code to generate dynamically ADD More input fields and then plan on using Save button to save their values in database. The challenge is that on Save button, I want to keep displaying the User Generated Input fields. However they are being refreshed on Save button clicked.

javascript:

HTML:

<form method="post"> <div id="itemRows">Item quantity: <input type="text" name="add_qty" size="4" />Item name: <input type="text" name="add_name" /> <input onclick="addRow(this.form);" type="button" value="Add row" /> </div> <p> <button id="_save">Save by grabbing html</button> <br> </p> </form>

最满意答案

一种方法是定义一个模板，通过jQuery动态添加它

模板

按钮单击事件

$("form").on("click", ".add_employer", function (e) { e.preventDefault(); var tplData = { i: counter }; $("#word_exp_area").append(tpl(tplData)); counter += 1; });

主要是调用e.preventDefault（）; 防止页面重新加载。

您可能想查看此工作示例

http://jsfiddle.net/hatemalimam/EpM7W/

One approach is to define a template to add it dynamically via jQuery

Template

Button click event

$("form").on("click", ".add_employer", function (e) { e.preventDefault(); var tplData = { i: counter }; $("#word_exp_area").append(tpl(tplData)); counter += 1; });

The main thing is to call e.preventDefault(); to prevent the page from reload.

You might want to check this working example

http://jsfiddle.net/hatemalimam/EpM7W/

更多推荐