Dynamic fields name - how it should be done?

Question

See the image below, I want to add many product as I want by clicking on "Add More Product" and then 2 new elements will be appear (Category and Items dropdowns). This will be done via jQuery to copy previous <li> and insert a new one.

When the elements are created, what the name of the dynamic fields should be? The data will be added into $_POST and I can insert into database.

enter image description here

HTML below, see dynamic fields name (example: name="items_2", name="items_2"): I have also added hidden input of current_added_products field. This tell me how many products currently added. Not sure if I need this?

<ul>
    <li>
        <label>Category</label>
        <select name="category_1"> 
            <option>CPU</option>
            <option>HDD</option>
        </select>
        <select name="items_1"> 
            <option>Item 1</option>
            <option>Item 2</option>
            <option>Item 3</option>
        </select>
    </li>
    <li>
        <label>Category</label>
        <select name="category_2"> 
            <option>CPU</option>
            <option>HDD</option>
        </select>
        <select name="items_2"> 
            <option>Item 1</option>
            <option>Item 2</option>
            <option>Item 3</option>
        </select>
    </li>
    <li>
        <label></label>
        <input type="hidden" name="current_added_products" value="2" />
        <input type="button" class="add_more_product" value ="Add More Product" />
    </li>
</ul>

Also, before the elements are created how to get the next numbers to be added?

Ram · Accepted Answer · 2012-10-03T10:32:05.657

2

Try this:

$('.add_more_product').click(function() {
    var $ul = $('ul:last');
    $ul.clone().find('select').attr('name', function(i, cur) {
        return cur.match(/\D+/g).join('') + (Number(cur.match(/\d+/g).join('')) + 1)
    }).end().insertAfter($ul)
})

http://jsfiddle.net/L7zwn/

$('.add_more_product').click(function(e) {
    e.preventDefault();
    var $ul = $('ul:last');
    $ul.clone().insertAfter($ul)
})

http://jsfiddle.net/U7Zeb/

edited Oct 03 '12 at 10:32

answered Oct 03 '12 at 10:09

Ram

143,282
16
168
197

Thanks! So I guess the elements naming is fine? What do you think about using array? example: `name="category[]"` – I'll-Be-Back Oct 03 '12 at 10:11
@I'll-Be-Back You are welcome, that's a good option and is easier to handle. – Ram Oct 03 '12 at 10:15

billyonecan · Answer 2 · 2012-10-03T10:37:23.913

You could give them all a name of category[] and items[], then when they are posted you'll end up with a numerically indexed array, this way you don't need to worry about appending a number to each newly created element. For example selecting CPU with Item 1 and HDD with Item 2 would result in the following once posted:-

array
  'category' => 
    array
      0 => string 'CPU' (length=3)
      1 => string 'HDD' (length=3)
  'items' => 
    array
      0 => string 'Item 1' (length=6)
      1 => string 'Item 2' (length=6)

This will make it a lot easier to add new form elements:-

html

<ul>
    <li>
        <label>Category</label>
        <select name="category[]">
            <option>CPU</option>
            <option>HDD</option>
        </select>
        <select name="items[]">
            <option>Item 1</option>
            <option>Item 2</option>
            <option>Item 3</option>
        </select>
    </li>
</ul>

<input type="button" class="add_more_product" value ="Add More Product" />

jquery

$(document).ready(function() {
    $('.add_more_product').on('click', function() {
        $('li:last').clone().appendTo('ul');
    });
});

Here's a fiddle

score 0 · Answer 3 · answered Oct 03 '12 at 09:57

0

You can use name="item[1]", name="item[2]". This will result in an array in your $_POST['item'].

answered Oct 03 '12 at 09:57

jgroenen

1,332
1
8
13

score 0 · Answer 4 · answered Oct 03 '12 at 10:17

You can replace your html you got from copy using following code

htmlCopy.replace(/category_[0-9]+/, function(a){
       return "category_"+ (current_added_products+1);
});
htmlCopy.replace(/items_[0-9]+/, function(a){
       return "items_"+ (current_added_products+1);
});

score -1 · Answer 5 · edited May 23 '17 at 12:13

use aray name as described in above answer. more to add in the databases use code like,

if (!$con){
   die('Could not connect: ' . mysql_error());
}

mysql_select_db($database, $con);

$authors = $_POST['Author'];
foreach($authors as $author) :
$sql="INSERT INTO savetest (type, number) VALUES ('{$_POST['type']}','{$author}')";

if (!mysql_query($sql,$con)){
   die('Error: ' . mysql_error());
}
endforeach;

Dynamic fields name - how it should be done?

5 Answers5