Question

this is a a page A.html

<form name=form>
<input type=text id = txtA>
</form>

when i load using jquery to B.html
i load multiple times.

<form name=form>
<input type=text id = txtA>
</form>

<form name=form>
<input type=text id = txtA>
</form>

<form name=form>
<input type=text id = txtA>
</form>

<form name=form>
<input type=text id = txtA>
</form>

How can i rename the form name to form1,form2,form3…formN
so i can get this

<form name=form1>
<input type=text id = txtA>
</form>

<form name=form2>
<input type=text id = txtA>
</form>

<form name=form3>
<input type=text id = txtA>
</form>

when i submit i want to use php to retrieve the data.

for each form
    formi.txtA

this way i can get each form data uniquely.

Answer 1

This would rename all forms called form and postfix an increasing number:

$('form[name="form"]').each(function(i) {
    this.name = 'form' + (i + 1);
});

When you load the forms one by one, you need a different approach:

var renamer = (function() {
    var i = 1; // private counter

    // return public interface
    return function(base) {
        $(base).find('form[name="form"]').each(function() {
            this.name = 'form' + i;
            ++i;
        });
    }
}());

For every time you add a new form, you call this:

renamer('#divid');

Where '#divid' is the jQuery selector for the parent node where your form is in.

Update

It seems that you have multiple input fields that you dynamically load. Instead of loading a whole new form, just load the <input /> fragment.

$(`#form`).load('http://www.example.com/inputfield?type=dob');

The server would then return a fragment:

<input name="dob" type="text" value="" />

This then gets inserted into one form, so you can submit it to PHP.