如何使用表中一行内选择字段的更改功能获取动态输入字段的ID？

Question

The problem is, I cant select the right input id of dynamic field inside a row.

<script>
$('tbody').on('change', 'select',function(e) //Same row #itemDescription.
{
e.preventDefault();
var id = $(this).val();
$.ajax({
type:'get',
url:'{{ route("<add.findItem>") }}' ,
data:{id:id},
dataType:'json',//return data will be json
success:function(data)
{

//THIS IS THE PROBLEM, EVERY TIME THE SELECT CHANGES, IT WILL DISPLAY THE VALUE TO THE LAST CREATED INPUT FIELD NOT CURRENT INPUT FIELD INSIDE A ROW. 
FIELD.
$('#itemDescription_'+ count +'').val(data.itemDescription);
},
error:function()
{
alert("Error Occurred");
}
}
);
});
</script>

I expect to display the values to the correct index inside the row.

Answer 1

Without seeing your DOM structure it's very hard to help you with this, but fundamentally this in your change callback will refer to the select the change occurred on. You can use jQuery's various traversal methods to find elements near that specific select .

For instance, this would find the first input on the same row as the select by finding the closest enclosing tr element and then using find to look within it for the :first input:

$('tbody').on('change', 'select',function(e) {
    var input = $(this).closest("tr").find("input:first");
    // ...
});

Then in your ajax callback you'd use input.val(data.itemDescription); .

Answer 2

To get the value of the select inside your table row

$(document).on('change', 'tbody tr select', function(){ 
   var dynamicInputVal = $(this).closest('tr').find("input[id^='itemDescription_']").val(); //This line must exactly be here, not in any other function

  $.ajax({
    type:'get',
    url:'{{ route("add.findItem") }}' ,
    data:{id:dynamicInputVal},
    dataType:'json',//return data will be json
    success:function(data){
       alert(dynamicInputVal)
    },
    error:function(){
       alert("Error Occurred");
    }
  });//end ajax



})

Your question is not clear, where is the dynamic input