Question

In this code javascript function is taking from[1] as argument in displayDatePicker(‘from[1]’, false, ‘dmy’, ‘-‘). When I clone this (second) row using jquery, all my input and select names get incremented but javascript function is still taking from[1] as argument. I want to ask how to change this from[1] to from[2] and so on

<tr>
         <td width="19%" align="right" ><input type="text" id="roomcat" name="roomcat[1]" value="Deluxe" /></td>
         <td width="1%" align="center" >&nbsp;</td>
         <td width="15%" align="left" ><select class="f" name="roomtype[1]" id="roomtype">
            <option value="">Please Select</option>
            <option value="Single">Single</option>
            <option value="Double">Double</option>
            <option value="Triple">Triple</option>
            <option value="Extra">Extra</option>
         </select></td>
         <td width="7%" align="left" ><input type="text" id="cfit" name="cfit[1]" /></td>
         <td width="8%" align="left" ><input type="text" id="cgit" name="cgit[1]" /></td>
         <td width="7%" align="center" ><input type="text" id="rfit" name="rfit[1]" /></td>
         <td width="8%" align="center" ><input type="text" id="rgit" name="rgit[1]" /></td>
         <td width="10%" align="center" >
            <input class="f" style="width:70px" type="text" size="12" name="from[1]" id="from" value="<?php if($mode==1)
            {
            echo $from;
            }
            else
            {
            echo "From";
            }?>" readonly="readonly"  />
            <a href="javascript:displayDatePicker('from[1]', false, 'dmy', '-')"><i.m.g alt="Pick a date" src="js/date.g.i.f" border="0" width="17" height="16" /></a>
         </td>
         <td width="10%" align="center" >
            <input style="width:70px" class="f" type="text" size="12" name="to[1]" id="to" value="<?php if($mode==1)
              {
              echo $to;
              }
              else
              {
              echo "To";
              }?>" readonly="readonly" />
              <a href="javascript:displayDatePicker('to[1]', false, 'dmy', '-')"><i.m.g alt="Pick a date" src="js/date.g.i.f" border="0" width="17" height="16"  /></a>
         </td>
         <td width="15%" align="left" >&nbsp;</td>
       </tr>

Jquery Code is

    $(document).ready(function() {
    $("#addrow").click(function() {
      var row = $('#table2 tbody>tr:last').clone(true);
        row.find("input:text").each(function(){
    this.name = this.name.replace(/\[(\d+)\]$/, function(str,p1){
            return '[' + (parseInt(p1,10)+1) + ']';
        });
        })
    row.find("select").each(function(){
    this.name = this.name.replace(/\[(\d+)\]$/, function(str,p1){
            return '[' + (parseInt(p1,10)+1) + ']';
        });
        })
      row.insertAfter('#table2 tbody>tr:last');
      return false;
    });
  });   

Answer 1

Drop the id attributes in your <input>s, you don’t need them and having duplicate ids just leaves you with invalid HTML and strange problems. If you’re using them for styling, use classes instead. If you need them for something else, then you’ll have to fix them when you copy so that you don’t end up with duplicate ids.

Now we can clean up your cloning a little bit. When you’re cloning your row, you don’t need to parse the number in brackets, you can just ask the table how many rows it has and add one to get the new number:

var n = $('#table2 tbody>tr').length + 1;

then your replace calls simplify to this:

this.name.replace(/\[(\d+)\]$/, '[' + n + ']');

Also, you can use a multiple-selector to iterate through the <input>s and the <select>s at the same time:

row.find('input:text, select').each(...)

You’re changing the same attribute in both cases so there’s no need for two identical loops.

Using javascript:displayDatePicker(...) in your <a> isn’t necessary. You can use jQuery to bind to clicks on those <a>s by adding a class to them:

<a class="datepicker">...</a>

and then binding a callback to them using click and a closest/find combination inside the callback will let you find the corresponding <input>:

$('a.datepicker').click(function() {
    var $input = $(this).closest('td').find('input[type=text]');
    displayDatePicker($input.attr('name'), false, 'dmy', '-'));
});

You’re using clone so the event handlers on the cloned elements will be copied so you don’t have to mess around with delegate or the dynamic versions of on.

Here’s a demo with simplified HTML: http://jsfiddle.net/ambiguous/yEaw6/