How to use jQuery to add form elements dynamically

Question

Here is my html:

<div id="extraPerson">
    <div class="controls controls-row">
      <input class="span3" placeholder="First Name" type="text" name="firstname2">
      <input class="span3" placeholder="Last Name" type="text" name="lastname2">     
         <select class="span2" name="gender2"><option value="Male">Male</option><option           value="Female">Female</option></select>   
        ...ETC
    </div>
</div>

<a href="#" id="addRow"><i class="icon-plus-sign icon-white"></i> Add another family member</p></a>

And this is my jquery:

<script>
    $(document).ready(function(){
        $('#addRow').click(function(){
            $("#extraPerson").slideDown();
         });
    })
</script>

The #extraPerson is hidden in the css.

It adds the div when the link is clicked. However, I want it to continue adding the same div each time the link is clicked. How do I do this? Even better if it appends the number to the form input names. Eg firstname3, firstname4 etc.

extraPerson isn't "adding" to anything, it's already there. How are you creating the other forms? — tymeJV
– tymeJV, Commented May 24, 2013 at 22:57

PSL · Accepted Answer · 2013-05-24 23:13:37Z

33

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">
    <div class="controls controls-row">
        <input class="span3" placeholder="First Name" type="text" name="firstname2">
        <input class="span3" placeholder="Last Name" type="text" name="lastname2">
        <select class="span2" name="gender2">
            <option value="Male">Male</option>
            <option value="Female">Female</option>
        </select>
    </div>
</div>
<div id="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.

     });
 })
 function GetHtml() //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;
}

edited May 24, 2013 at 23:13

answered May 24, 2013 at 22:57

PSL

124k21 gold badges257 silver badges243 bronze badges

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

2 Comments

PSL Over a year ago

Updated the answer with different input names for each row.

adventistapr Over a year ago

Hello @PSL, how can I remove an inserted row in the case of this example.

Pevara · Accepted Answer · 2013-05-24 23:12:33Z

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 html
            var $person = $('.person').last();
            var person = $person.html();
            // find the number
            var index = person.indexOf('firstname');
            var number = 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 person
            var $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/

Akber Iqbal · Accepted Answer · 2019-01-24 04:52:46Z

0

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

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

edited Jan 24, 2019 at 4:52

Akber Iqbal

15.1k12 gold badges54 silver badges77 bronze badges

answered Jan 24, 2019 at 4:30

Igor Demenchuk

1

Collectives™ on Stack Overflow

How to use jQuery to add form elements dynamically

3 Answers 3

Demo

HTML

JS

Small Css

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

HTML

JS

Small Css

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related