jQuery how to add unique id to dynamic form input fields

Question

I have this form created using Laravel blade template and made it dynamic using jQuery. now i can populate table rows with all the input fields in it. now i'm trying to get ajax data in to those fields on change select value in first column. it only works on first row because there is no unique id for each input field. please help me to fix this.

following code used in form on blade template

<tr id="1">
        <td>
            {!! Form::select('item_id[]', ['' => 'Select an item'] + $items, null, array('class' => 'form-control', 'id' => 'itemId', 'required')) !!}
        </td>
        <td>
            {!! Form::text('item_description[]', null, ['class' => 'form-control', 'id' => 'item_description', 'placeholder' => 'Not Required | Optional']) !!}
        </td>
        <td>
            {!! Form::text('units[]', null, ['class' => 'form-control', 'placeholder' => 'Add Units', 'required']) !!}
        </td>
        <td>
            {!! Form::text('rate[]', null, ['class' => 'form-control', 'id' => 'rate', 'placeholder' => 'Add Rate', 'required']) !!}
        </td>
        <td>
            {!! Form::text('amount[]', null, ['class' => 'form-control', 'placeholder' => 'Add Hrs and Rate', 'id' => 'amount']) !!}
        </td>
        <td class="text-center actions"><a id="delete-row" onclick="delTableRow($('#dynamic-tbl'));" href="#"><i class="fa fa-times"></i></a></td>
</tr>

Following code used to populate more rows with same input fields

/*
 * Dynamic table row adding and deleting functions
 */
function addTableRow(jQtable){
    var rowId = parseInt($('#dynamic-tbl tbody tr:last').attr('id'));
    ++rowId;
   // console.log(rowId);
    jQtable.each(function(){
        var tds = '<tr id='+rowId+'>';
        jQuery.each($('tr:last td', this), function() {tds += '<td>'+$(this).html()+'</td>';});
        tds += '</tr>';
        if($('tbody', this).length > 0){$('tbody', this).append(tds);
        }else {$(this).append(tds);}
    });
}

in here $(this).html() duplicate the inner html from previous row. i'm trying to add an unique id for each input field.

and following code used to get data using ajax

/*
 * Estimate Item Description Ajax function
 */
$('#dynamic-tbl #itemId').change(function(e) {
    //console.log(e);
    var item_id = e.target.value;
    //ajax
    $.get('/ajax-item?item_id=' + item_id, function(data){
        //success data
        //console.log(data);
        $('#item_description').empty();
        $('#rate').empty();
        $.each(data, function(index, itemObj){
            $('#item_description').val(itemObj.name);
            $('#rate').val(itemObj.sale_price);
        });
    });
});

bpoiss · Answer 1 · 2016-01-30T10:32:40.387

You can use the uniqueId() method from jQuery UI. It will be applied to a set of matched element, so you just need to apply it to your #dynamic-tbls input fields:

$('#dynamic-tbl input').uniqueId()

If you don't want to use jquery you can also write your own function that creates a unique id:

function uniqId() {
  return Math.round(new Date().getTime() + (Math.random() * 100));
}

If you want the id only to have an increasing number at the and you could also modify your addTableRow function to change the id before copying the html to the next row:

$(this).find('input').attr("id","itemId" + rowId);

jQuery how to add unique id to dynamic form input fields

1 Answers1