保存动态生成的输入字段 [英] Save dynamically generated input fields
问题描述
我正在使用此代码动态生成ADD More输入字段,然后计划使用Save按钮将其值保存在数据库中.挑战在于,在保存"按钮上,我想继续显示用户生成的输入"字段.但是,通过单击保存"按钮可以刷新它们.
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:
javascript:
<script type="text/javascript">
var rowNum = 0;
function addRow(frm) {
rowNum++;
var row = '<p id="rowNum' + rowNum + '">Item quantity: <input type="text" name="qty[]" size="4" value="' + frm.add_qty.value + '"> Item name: <input type="text" name="name[]" value="' + frm.add_name.value + '"> <input type="button" value="Remove" onclick="removeRow(' + rowNum + ');"></p>';
jQuery('#itemRows').append(row);
frm.add_qty.value = '';
frm.add_name.value = '';
}
function removeRow(rnum) {
jQuery('#rowNum' + rnum).remove();
}
</script>
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动态添加模板
One approach is to define a template to add it dynamically via jQuery
模板
<script type="text/html" id="form_tpl">
<div class = "control-group" >
<label class = "control-label"for = 'emp_name' > Employer Name </label>
<div class="controls">
<input type="text" name="work_emp_name[<%= element.i %>]" class="work_emp_name"
value="" />
</div>
</div>
按钮点击事件
$("form").on("click", ".add_employer", function (e) {
e.preventDefault();
var tplData = {
i: counter
};
$("#word_exp_area").append(tpl(tplData));
counter += 1;
});
主要是调用 e.preventDefault(); 来阻止该页面重新加载.
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/
这篇关于保存动态生成的输入字段的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!