使用值加载动态添加的输入字段

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>