jQuery 实时保存页面动态添加的数据的示例

2020-05-18 09:00:33易采站长站整理

本文介绍了jQuery 实时保存页面动态添加的数据的示例,分享给大家,具体如下:

需求:用户填写的东西,必须要实时保存

分析:监听用户操作事件,如:change、keyup 等,向后端发送请求

实际情况:

用户填写的表单,是通过 JavaScript 动态新增的,这就需要使用为动态新增元素绑定事件。
发送请求给后端,取决于前面的必填项是否已经完整填写。
必须区分用户是动态新增了填写栏目呢?还是在修改?
当前事件对象是什么?怎么通过该对象获取用户输入的数据?
用户多次修改同一栏目,必须传送带有 ID 的数据给后端。目的,用于识别是新增,还是更新操作。

动态新增代码:


// template() 是一个模板格式化函数
$('#modal_pl_content').html(template('modal_temp', {data:''}));

模板代码:


<script id="modal_temp" type="text/html">
<form class="cksd_comment_id">
<div class="col-sm-12 addID">
<input type="hidden" name="comment_update_id" value="" />
<div class="col-sm-12 hr hr-18 dotted hr-dotted"></div>
<div class="col-sm-3 form-group">
<label class="col-sm-3 control-label no-padding-right">评价ID</label>
<div class="col-sm-9"><input type="text" class="col-xs-12" name="commentID"></div>
</div>
<div class="col-sm-1 form-group">
<select name="star" onchange="checkIsInput(this)">
<option value="5">5</option>
<option value="4">4</option>
<option value="3">3</option>
<option value="2">2</option>
<option value="1">1</option>
</select>
</div>
<div class="col-sm-4 form-group">
<label class="col-sm-3 control-label no-padding-right">当前数量</label>
<div class="col-sm-8">
<div class="col-sm-5"><input type="text" class="col-xs-12" name="now_yes" onkeyup="is_intdata(this,this.value)" value="0"></div>
<label class="col-sm-1 control-label no-padding-left no-padding-right">of</label>
<div class="col-sm-5"><input type="text" class="col-xs-12" name="now_total" onkeyup="is_intdata(this,this.value)" value="0"></div>
</div>
</div>
<div class="col-sm-3 form-group">
<div class="col-sm-12">
<label class="col-sm-1 control-label no-padding-left no-padding-right">Yes</label>
<div class="col-sm-5"><input type="text" class="col-xs-12" name="add_yes" onkeyup="is_intdata(this,this.value)" value="0"></div>