Question

On the form, a customer can create multiple groups. Every group has the same input fields. If customer clicks on ‘+ Additional Group’ then an additional group will be created dynamically via jQuery (The html is downloaded via an AJAX call).

Below is the sample html. Each ul tag is a group. In the group ul, each input field includes a group number field. Like this: foo_1, foo_2

current_group is a hidden field which keeps track of the total number of groups.

If add_group button has been clicked, jQuery will get the total number of groups from current_group and then additional group dynamically.

Is this how it should be done?

Also if a customer click on Submit button when they have finish Form – it may return back to same page because of Error Validation via PHP. I don’t want to loose dynamic html groups again. How can this be solved?

<h2> Group One </h2>
<ul class="Form">
    <li>
        <label>Foo</label>
        <select name='foo_1'>
                <option value='1'>One</option>
                <option value='2'>Two</option>
                <option value='3'>Three</option>
        </select>
    </li>
   <li>
        <label>Bar</label>
        <select name='bar_1'>
                <option value='car'>Car</option>
                <option value='bike'>Bike</option>
                <option value='van'>Van</option>
        </select>
    </li>
<ul>

<h2> Group Two </h2>
<ul class="Form">
    <li>
        <label>Foo</label>
        <select name='foo_2'>
                <option value='1'>One</option>
                <option value='2'>Two</option>
                <option value='3'>Three</option>
        </select>
    </li>
   <li>
        <label>Bar</label>
        <select name='bar_2'>
                <option value='car'>Car</option>
                <option value='bike'>Bike</option>
                <option value='van'>Van</option>
        </select>
    </li>
<ul>

<input type='hidden' id='current_group' value='2' />
<input type='button' id='add_group' value='+ Additional Group' />

Answer 1

Well if the first set of HTML elements is there already, you can always use jQuery’s clone() to copy the elements instead of calling the server. You would need to find the elements and replace the names like you talked about.

jQuery(".Form").clone().find("select").eq(0).prop("name", "foo_" + count).end().eq(1).prop("name", "bar_" + count).end().end().appendTo("#someElem"); 

In a more readable format

var count = 1;
function addRow(){
    count++;
    var newFormElems = jQuery(".Form").clone();  //clone the form
    var selects = newFormElems.find("select");  //find the selects
    selects.eq(0).prop("name", "foo_" + count);  //rename first
    selects.eq(1).prop("name", "bar_" + count);  //rename second
    newFormElems.appendTo("#someElem");   //add to the page
}

Another way to redo the naming function which it increments the number:

newFormElems.find("select").each( 
    function(){        
        this.name = this.name.replace(/^([^_]+_)(\d+)/, function(match,str,num){ return str + (parseInt(num,10)+1)});
    }
);

And what is the best way to deal with the dynamic forms? Well you can submit the data with Ajax or you have the php code write out form after the validation.