Load dynamically added input fields with a value

Question

I have used this example http://jsfiddle.net/aaki/hMJEy/1/ to dynamically add input fields to a form, this works like a charm.

This is the code :

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>

But now I want to get the data from the database and have the values put into the form. So that the data can be updated and then saved again in the database.

Unfortunately jQuery is my weak point and been struggling with this for a while now. Any suggestions or working examples?

Thank you very much in advance.

Hsueh Ming-Fang · Accepted Answer · 2016-03-10 03:47:43Z

3

you'll need to convert that data into a JSON string, then use jQuery.getJSON method loads 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>

edited Mar 10, 2016 at 3:47

answered Mar 9, 2016 at 3:00

Hsueh Ming-Fang

1243 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

MrSoolmaan Over a year ago

Nice! Very neat solution, I like the way it reads in json. In your example you have added 3 names, is there anyway that the 3 input fields with the names are already displayed when the page is loaded? Many thanks again.

Hsueh Ming-Fang Over a year ago

if input field array length < data length, add input fields, hope it helps. – Hsueh Ming-Fang 1 hour ago

MrSoolmaan Over a year ago

Thank you, big help! I was trying things that didn't even come close to your solution. Learning new things everyday. Thanks again!

Collectives™ on Stack Overflow

Load dynamically added input fields with a value

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related