CODEWITHSUNDEEP
javascripthtmljquery
I'll-Be-Back
I'll-Be-Back

Reputation: 10828

Creating multiple groups dynamically

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' />

Upvotes: 0

Views: 356

Answers (2)

Imdad
Imdad

Reputation: 6042

There are several way to do one thing. This is your logic. It should work if no mistakes made.

Whenever you are fetching displaying the new group keep a hidden field named group_ids[] You will receive all the group ids in an array. You can access that array from $_REQUEST['group_ids'] (you can use $_POST or $_GET according to your code)

Now whenever you submit the page check what group ids are submitted by user. You can receive the drop down values also. If you need to display those groups again you can get it from database using $_REQUEST['group_ids'] and keep the correct option selected by comparing the current value from the user selected value.

Upvotes: 1

epascarello
epascarello

Reputation: 207527

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.

Upvotes: 1

Related Questions