本文介紹了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> <label class="col-sm-1 control-label no-padding-left no-padding-right">No</label> <div class="col-sm-5"><input type="text" class="col-xs-12" name="add_no" readonly onkeyup="is_intdata(this,this.value)" value="0"></div> </div> </div> <div class="col-sm-1 form-group">總數: <br><span class="total_yes">0</span> of <span class="totals">0</span></div> <div class="col-sm-1 form-group delbox"><button type="button" class="btn btn-danger btn-xs" onclick="delPlID(this)">刪除</button></div> </div> </form></script>
新聞熱點
疑難解答
圖片精選