Question

I am quite new with jQuery and I don’t know how to implement this scenario.

For example if I have a form with two text boxes in a raw Name and Email. At the right is a plus button where user can press and another raw will be created bellow with two fields Name and Email, the second raw will have at the right an X button that user can click and that raw will be deleted.

Name: _____ Email: _______ +

Name: _____ Email: _______ X

Name: _____ Email: _______ X

Name: _____ Email: _______ X

---

• SAVE –

At the bottom of the form there is a Save button. And when user press it the values from all boxes are take and saved … that is not a problem.

My problem is how should I implement the dynamic fields and pick the values from the fields when I press save?

Answer 1

DEMO
Try this code:

   $(document).on("click",".add",function(){
       //take the id
       var id = parseInt($(this).attr('id').substr(4));
       id = id+1;
       //add new row I don't know if you have a table or div layout

       $(this).after('<p><input type="text name="name_'+id+'" id="name_'+id+'"/> <input type="text" name="email_'+id+'" id="email_'+id+'"/><input type="button" id="remove_'+id+'" class="remove" value="X"/><input type="button" class="add" id="add_'+id+'" value="+" /></p>');
    });
    $(document).on("click",".remove",function(){
       //take the id
       var id = $(this).attr('id').substr(7);
       //delete
       $("#name_"+id).remove();
       $("#email_"+id).remove();
       $("#add_"+id).remove();
       $("#remove_"+id).remove();
    });

your html

  <p><input type="text name="name_1" id="name_1"/> <input type="text" name="email_1" id="email_1"/><input type="button" id="add_1" value="+" /></p>