Issue when duplicating element in a form -> same names

Question

So I got this:

HTML

<table id="mytable">
<tr>
   <td>

   </td>
   <td>

   </td>
</tr>
<tr>
   <td>
      3. Choose elements:
   </td>
   <td>
      <select name="antal_tidspunkter" id="antal_tidspunkter">
         <option value="1" SELECTED>1</option>
         <option value="2">2</option>
         <option value="3">3</option>
         <option value="4">4</option>
         <option value="5">5</option>
      </select>
   </td>
</tr>
    <tr class="highlightedRowStart">
   <td class="borderLeft">
      Time
   </td>
   <td class="borderRight">
      <select name="seats_timeclock[29]">
         <option value="08:00">08:00</option>
         <option value="08:30">08:30</option>
         <option value="09:00">09:00</option>
         <option value="09:30">09:30</option>
         <option value="10:00">10:00</option>
         <option value="10:30">10:30</option>
         <option value="11:00">11:00</option>
         <option value="11:30">11:30</option>
         <option value="12:00">12:00</option>
         <option value="12:30">12:30</option>
         <option value="13:00">13:00</option>
         <option value="13:30">13:30</option>
         <option value="14:00">14:00</option>
         <option value="14:30">14:30</option>
         <option value="15:00">15:00</option>
         <option value="15:30">15:30</option>
         <option value="16:00">16:00</option>
         <option value="16:30">16:30</option>
         <option value="17:00">17:00</option>
         <option value="17:30">17:30</option>
         <option value="18:00" SELECTED>18:00</option>
         <option value="18:30">18:30</option>
         <option value="19:00">19:00</option>
         <option value="19:30">19:30</option>
         <option value="20:00">20:00</option>
         <option value="20:30">20:30</option>
         <option value="21:00">21:00</option>
         <option value="21:30">21:30</option>
         <option value="22:00">22:00</option>
         <option value="22:30">22:30</option>
      </select>
   </td>
</tr>
<tr class="highlightedRowMiddle">
   <td class="borderLeft">
      2:
   </td>
   <td class="borderRight">
      <select name="seats_free_2tables[29]">
         <option value="0">0</option>
         <option value="1">1</option>
         <option value="2" SELECTED>2</option>
         <option value="3">3</option>
         <option value="4">4</option>
         <option value="5">5</option>
         <option value="6">6</option>
         <option value="7">7</option>
         <option value="8">8</option>
         <option value="9">9</option>
         <option value="10">10</option>
         <option value="11">11</option>
         <option value="12">12</option>
         <option value="13">13</option>
         <option value="14">14</option>
         <option value="15">15</option>
         <option value="16">16</option>
         <option value="17">17</option>
         <option value="18">18</option>
         <option value="19">19</option>
         <option value="20">20</option>
      </select>
   </td>
</tr>
<tr class="">
   <td class="borderLeft">
     4:
   </td>
   <td class="borderRight">
      <select name="seats_free_4tables[29]">
         <option value="0">0</option>
         <option value="1">1</option>
         <option value="2">2</option>
         <option value="3">3</option>
         <option value="4" SELECTED>4</option>
         <option value="5">5</option>
         <option value="6">6</option>
         <option value="7">7</option>
         <option value="8">8</option>
         <option value="9">9</option>
         <option value="10">10</option>
         <option value="11">11</option>
         <option value="12">12</option>
         <option value="13">13</option>
         <option value="14">14</option>
         <option value="15">15</option>
         <option value="16">16</option>
         <option value="17">17</option>
         <option value="18">18</option>
         <option value="19">19</option>
         <option value="20">20</option>
      </select>
   </td>
</tr>
<tr class="highlightedRowEnd">
   <td class="borderLeft">
      Converttable
   </td>
   <td class="borderRight">
      <select name="seats_converttables[29]">
         <option value="0">0</option>
         <option value="1">1</option>
         <option value="2" SELECTED>2</option>
         <option value="3">3</option>
         <option value="4">4</option>
         <option value="5">5</option>
         <option value="6">6</option>
         <option value="7">7</option>
         <option value="8">8</option>
         <option value="9">9</option>
         <option value="10">10</option>
         <option value="11">11</option>
         <option value="12">12</option>
         <option value="13">13</option>
         <option value="14">14</option>
         <option value="15">15</option>
         <option value="16">16</option>
         <option value="17">17</option>
         <option value="18">18</option>
         <option value="19">19</option>
         <option value="20">20</option>
      </select>
   </td>
</tr>
<tr class="spacer">
   <td></td>
</tr>
</table>

jQuery

$(document).ready(function() {

    $("#antal_tidspunkter").bind("change", function() {
        $("#mytable tr:gt(6)").remove();
        for (var i = 1; i < this.value; i++) {
            $("#mytable tr:gt(1):lt(5)").clone().appendTo("#mytable");
        }
    });
});

DEMO: http://jsfiddle.net/bTWQg/

Works like this, when you change the number of elements in the selector, it adds more elements.

My issue with this is that when it duplicate the element, it keeps the name: seats_timeclock[29] so later when I'm working with the handling of the form (PHP), I only receive one element's data.

Is there anyway to add a random number inside [] from 11111, 99999 each time the element gets duplicated? Otherwise i can't grab the data filled on the new elements..

Answer 1

$(document).ready(function() {

    // function to generate random number
    // between 1111 to 9999

    function randNum() {
        return Math.floor(Math.random() * (9999 - 1111 + 1)) + 1111;
    }

    $("#antal_tidspunkter").bind("change", function() {
        $("#mytable tr:gt(6)").remove();
        for (var i = 1; i < this.value; i++) {
            $("#mytable tr:gt(1):lt(5)")
                .clone()
                .find('select[name^=seats_timeclock]')
                attr('name', function() { // changing the name
                    return 'seats_timeclock_[' + randNum() + ']';
                })
                .end() // go back to clone element
                .appendTo("#mytable");
        }
    });
});

DEMO

Above code will work without changing HTML and with a single chain statement.

According to your demo

$(document).ready(function() {
    // function to generate random number
    function randNum() {
        return Math.floor(Math.random() * (9999 - 1111 + 1)) + 1111;
    }
    $("#antal_tidspunkter").bind("change", function() {
        $("#mytable tr:gt(6)").remove();
        for (var i = 1; i < this.value; i++) {
            var randnr = randNum();
            
            $("#mytable tr:gt(1):lt(5)")
                .clone()
                .find('select[name^=seats_timeclock]')
                .attr('name', function() { // changing the name
                    return 'seats_timeclock[' + randnr + ']';
                })
                .end() // need to put end to jump to clone
                .find('select[name^=seats_free_2tables]')
                .attr('name', function() { // changing the name
                    return 'seats_free_2tables[' + randnr + ']';
                })
                .end()  // need to put end to jump to clone
                .find('select[name^=seats_free_4tables]')
                .attr('name', function() { // changing the name
                    return 'seats_free_4tables[' + randnr + ']';
                })
                .end()  // need to put end to jump to clone
                .find('select[name^=seats_converttables]')
                .attr('name', function() { // changing the name
                    return 'seats_converttables[' + randnr + ']';
                })
                .end() // go back to clone element
                .appendTo("#mytable");
        }
    });
});

DEMO

Answer 2

$(document).ready(function(){
    var clonedObj;
    $("#antal_tidspunkter").bind("change", function() {
        $("#mytable tr:gt(6)").remove();
        for (var i = 1; i < this.value; i++) {
            clonedObj = $("#mytable tr:gt(1):lt(5)").clone();
            $(clonedObj).find('select[name="seats_timeclock[29]"]').attr('name', 'seats_timeclock[' + Math.floor((Math.random()*100000)+1) + ']');
            $(clonedObj).appendTo("#mytable");
        }
     });
});​

EDIT: With support for variable numbers inside seats_timeclock. Makes use of jQuery filter() function and a simple regex.

$(document).ready(function(){
    var clonedObj;
    $("#antal_tidspunkter").bind("change", function() {
        $("#mytable tr:gt(6)").remove();
        for (var i = 1; i < this.value; i++) {
            clonedObj = $("#mytable tr:gt(1):lt(5)").clone();
            $(clonedObj).find('select').filter(function(){
                if($(this).attr('name').match(/seats_timeclock/)){
                    return true;
                } else {
                    return false;
                }                   
            }).attr('name', 'seats_timeclock[' + Math.floor((Math.random()*100000)+1) + ']');
            $(clonedObj).appendTo("#mytable");
        }
     });
});​

Answer 3

Use this code:

$(document).ready(function(){

    $("#antal_tidspunkter").bind("change", function() {
        $("#mytable tr:gt(6)").remove();
        for (var i = 1; i < this.value; i++) {
            $("#mytable tr:gt(1):lt(5)").clone().children("select").attr("name", "seats_free_2tables[" + random() + "]").appendTo("#mytable");
        }
     });
});​

And for that random() function, use this code:

function random()
{
    return Math.floor(Math.random()*10);
}

---

Update: This code totally works:

function random()
{
    return Math.floor(Math.random()*10);
}
$(document).ready(function(){
    $("#antal_tidspunkter").bind("change", function() {
        $("#mytable tr:gt(6)").remove();
        for (var i = 1; i < this.value; i++) {
            var a = $("#mytable tr:gt(1):lt(5)").clone();
            a.find(".random").attr("name", "seats_free_2tables[" + random() + "]");
            a.appendTo("#mytable");
        }
    });
});​

See this fiddle. Give a class random to all, which you need to change!

Answer 4

You can alter the name attribute after you clone the element :

  var clone = $("#mytable tr:gt(1):lt(5)").clone();
  var min = 1111;
  var max = 9999;
  var number = Math.round(Math.random() * (max-min)) + min ; 
  clone.find('select[name^=seats_timeclock]')
       .attr('name','seats_timeclock['+number+']');
  clone.appendTo("#mytable");

Here's a demo : http://jsfiddle.net/bTWQg/3/

Answer 5

You could use array inputs:

<select name="seats_timeclock[]">

That way you can add as many inputs as you want in the form, and they will be properly packed and sent by the browser.

Then, in PHP, you will have $_POST['seats_timeclock'][0], $_POST['seats_timeclock'][1] and so on. You could easily loop through that array.

foreach($_POST['seats_timeclock'] as $key => $seats_timeclock) {
    // the other array posts, will be serialized in the same way, 
    // so you can access the other fields having the same index
    $seats_free_2tables = $_POST['seats_free_2tables'][$key];
    $seats_free_4tables = $_POST['seats_free_4tables'][$key];
    ...
}