使用值加載動態添加的輸入字段

Question

我已經使用此示例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是我的弱點，並且一直在努力。任何建議或工作示例？

非常感謝您提前。

Answer 1

您需要將該數據轉換爲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>