Question

How can I create a dynamic form using jQuery. For example if I have to repeat a block of html for 3 times and show them one by one and also how can I fetch the value of this dynamic form value.

<div>
    <div>Name: <input type="text" id="name"></div>
    <div>Address: <input type="text" id="address"></div>
</div>

Answer 1

To insert that HTML into a form 3 times, you could simply perform it in a loop.

HTML:

<form id="myForm"></form>

jQuery:

$(function() {
    var $form = $('#myForm');  // Grab a reference to the form

        // Append your HTML, updating the ID attributes to keep HTML valid
    for(var i = 1; i <= 3; i++) {
        $form.append('<div><div>Name: <input type="text" id="name' + i + '"></div><div>Address: <input type="text" id="address' + i + '"></div></div>')
    }
});

As far as fetching values, how you go about it would depend on your intent. jQuery can serialize the entire form, or you can select individual input values.

.append() – http://api.jquery.com/append/