Jquery dynamic form elements

Question

I have a from to add relationships to user, when user clicks on add button i am using jquery to add a new row of relative. i am doing this by using a jquery funciton called addRowIntoTab()

function addRowIntoTab() {
        var url = templates.family_details;
        generic_get(url, function (html) {
           // $('#family_details_row').append(html);
            $('.holder tr:last').after(html);
        });
    }

the code is working and i am able to populate a list of fields like below:

<tr>
<td>
<input type="text" name="textfield" id="textfield" value="Lorem Ipsum"></td>
  <td>
            <select>
                  <option value="daughter">Daughter</option>
                  <option value="Son">Son</option>
                  <option value="wife">Wife</option>
                  <option value="mother">Mother</option>
                  <option value="father">Father</option>
                  <option value="mil">Mil</option>
                  <option value="fil">Fil</option>
                  <option value="brother">Brother</option>
            </select>
  </td>
  <td>
  <input type="text" name="textfield" id="datepicker3" value="21/01/84"></td>
  <td class="last"><input type="text" name="textfield" id="textfield" value="32"></td>
</tr>

The problem i am facing now is input IDs are same for all form elements hence i am unable to serialize() and send it to ajax.

is there a whey to add these fields in a why each have a unique ID or differentiation?

Thanks in advance Max

Answer 1

You should also never have elements with the same ID in the same page, as this can cause alot of headaches... not to mention not passing W3C validation.

Now, you should replace name="textfield" to name="textfield[]" if you want to use the same names.

When it gets sent to PHP, the data will be in the form of an array, which you can read like so:

<?php
foreach($_POST['textfield'] as $data) {
    echo $data;
}
?>

If you do not have control over the data sender, then you can add something to each ID to make them unique... In this case, I am adding an auto-incrementing number at the end of each ID attribute:

var currentID = 0;
function addRowIntoTab() {
    var url = templates.family_details;
    generic_get(url, function (html) {
       // $('#family_details_row').append(html);
        var data = $(html);
        data.find('#textfield,#datepicker3').each(function() {
          switch($(this).attr('id')) {
            case 'textfield':
              $(this).attr('id','textfield'+currentID);
              break;
            case 'datepicker3':
              $(this).attr('id','datepicker3'+currentID);
              break;
          }
          currentID++;
        }
        $('.holder tr:last').after(data);
    });
}

My preferred option Remove the ID attributes and change the names attributes

function addRowIntoTab() {
  var url = templates.family_details;
  generic_get(url, function (html) {
       // $('#family_details_row').append(html);
      var data = $(html);
//Remove ID
      data.find('#textfield,#datepicker3').removeAttr('id');
//Appends brackets "[]" to the end of each input's name
      data.find('input').each(function() { $(this).attr('name',$(this).attr('name')+'[]'); });
    $('.holder tr:last').after(data);
  });
}

I would recommend that you remove the ID's entirely unless you're using jquery selectors.... if this is the case, then you should use class selectors rather than an ID selectors. IE: $('.textfield') instead of $('#textfield').

function addRowIntoTab() {
    var url = templates.family_details;
    generic_get(url, function (html) {
       // $('#family_details_row').append(html);
        var data = $(html);
        data.find('#textfield,#datepicker3').each(function() {
          $(this).attr('class',$(this).attr('id')); //creates a class with the ID name
          $(this).removeAttr('id'); //removes the ID attribute
        }
        $('.holder tr:last').after(data);
    });
}

This should fix your conflict and also allow you to POST successfully.