[英]Load dynamically added input fields with a value
我已經使用了這個示例http://jsfiddle.net/aaki/hMJEy/1/來將輸入字段動態添加到表單中,這就像一個魅力。
這是代碼:
使用Javascript:
$('.multi-field-wrapper').each(function() {
var $wrapper = $('.multi-fields', this);
$(".add-field", $(this)).click(function(e) {
$('.multi-field:first-child', $wrapper).clone(true).appendTo($wrapper).find('input').val('').focus();
});
$('.multi-field .remove-field', $wrapper).click(function() {
if ($('.multi-field', $wrapper).length > 1)
$(this).parent('.multi-field').remove();
});
});
HTML:
<form role="form" action="/wohoo" method="POST">
<label>Stuff</label>
<div class="multi-field-wrapper">
<div class="multi-fields">
<div class="multi-field">
<input type="text" name="stuff[]">
<button type="button" class="remove-field">Remove</button>
</div>
</div>
<button type="button" class="add-field">Add field</button>
</div>
</form>
但是現在我想從數據庫中獲取數據並將值放入表格中。 這樣就可以更新數據,然后再次將其保存在數據庫中。
不幸的是,jQuery是我的弱點,並且已經為此苦苦掙扎了一段時間。 有什么建議或可行的例子嗎?
提前非常感謝您。
您需要將數據轉換為JSON字符串,然后使用jQuery.getJSON
方法加載JSON。
function addField( $wrapper ) { var $elem = $('.multi-field:first-child', $wrapper).clone(true).appendTo($wrapper).find('input'); $elem.val('').focus(); return $elem; } function loadData(){ $.getJSON( "http://www.json-generator.com/api/json/get/bSxiJZPXuG?indent=2", function(data) { /* [ { "name": [ "Tom", "Mike", "Sam" ] } ] */ for( var i = 0; i < data[0][ "name" ].length; i++ ) { if ( i >= $('.multi-field input').length ) { var $wrapper = $('.multi-fields'), $elem = addField( $wrapper ) $elem.val( data[0][ "name" ][i] ) } else { $('.multi-field input').eq(i).val( data[0][ "name" ][i] ) } } }); } $('.multi-field-wrapper').each(function() { var $wrapper = $('.multi-fields', this); $(".add-field", $(this)).click(function(e) { addField( $wrapper ) }); $('.multi-field .remove-field', $wrapper).click(function() { if ($('.multi-field', $wrapper).length > 1) $(this).parent('.multi-field').remove(); }); }); loadData();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <form role="form" action="/wohoo" method="POST"> <label>Stuff</label> <div class="multi-field-wrapper"> <div class="multi-fields"> <div class="multi-field"> <input type="text" name="stuff[]"> <button type="button" class="remove-field">Remove</button> </div> </div> <button type="button" class="add-field">Add field</button> </div><div id="images"></div> </form>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.