加载动态添加的输入字段

Load dynamically added input fields with a value

本文关键字：输入 字段 添加 动态 加载      更新时间：2023-09-26

我使用此示例 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>

相关文章：