How To Use Jquery To Add Form Elements Dynamically

Question

Here is my html:

Solution 1:

Try this way:-

Demo

HTML

Create a template extraPersonTemplate and use it to construct further. Add a container tyo your content section.

<div class="extraPersonTemplate">
    <divclass="controls controls-row"><inputclass="span3"placeholder="First Name"type="text"name="firstname2"><inputclass="span3"placeholder="Last Name"type="text"name="lastname2"><selectclass="span2"name="gender2"><optionvalue="Male">Male</option><optionvalue="Female">Female</option></select></div></div><divid="container"></div>

JS

  $(document).ready(function () {
     $('<div/>', {
         'class' : 'extraPerson', html: GetHtml()
     }).appendTo('#container'); //Get the html from template
     $('#addRow').click(function () {
           $('<div/>', {
               'class' : 'extraPerson', html: GetHtml()
     }).hide().appendTo('#container').slideDown('slow');//Get the html from template and hide and slideDown for transtion.

     });
 })
 functionGetHtml() //Get the template and update the input field names
{
      var len = $('.extraPerson').length;
    var $html = $('.extraPersonTemplate').clone();
    $html.find('[name=firstname]')[0].name="firstname" + len;
    $html.find('[name=lastname]')[0].name="lastname" + len;
    $html.find('[name=gender]')[0].name="gender" + len;
    return $html.html();    
}

Small Css

.extraPersonTemplate {
    display:none;
}

Solution 2:

I came up with a solution of my own. Plenty of comments, but feel free to ask.

$(document).ready(function(){
        $('#addRow').click(function(){
            // get the last person and html htmlvar $person = $('.person').last();
            var person = $person.html();
            // find the numbervar index = person.indexOf('firstname');
            varnumber = parseInt(person.substring(index+9,1));
            var next = number+1;
            // replace the number// for firstname
            person.replace('firstname'+number, 'firstname'+next);
            // for lastname
            person.replace('lastname'+number, 'lastname'+next);
            // for gender
            person.replace('gender'+number, 'gender'+next);
            // insert the new person after the last one
            $person.after($('<div class="person">'+person+'</div>'));            
            // get the new personvar $new = $('.person').last();
            // hide it
            $new.hide();
            // reset the values
            $new.find('input, select').val('');
            // fade it in
            $new.slideDown();
         });
    })

I like the fact that @PSL uses a template though, might be a better an easier solution. Do note that you would need to add the code to update the person number in there...

A fiddle: http://jsfiddle.net/Mk7MQ/

Solution 3:

both Pevara and PSL scripts not working correctly all new lines names/ids are same as first one so there is no way to get the values later from them in the script .substring(index+9,1) should be corrected to .substring(index+9,index+10) but even than next will be always ==2 as $person.html(); haven't been really changed

Baca Juga

here are 3 solution options : https://www.jqueryscript.net/form/jQuery-Plugin-To-Dynamically-Add-More-Form-Fields-czMore.html

https://www.codexworld.com/add-remove-input-fields-dynamically-using-jquery/

https://www.sanwebe.com/2013/03/addremove-input-fields-dynamically-with-jquery