Как сделать несколько триггеров Ajax с динамическим идентификатором

Question

Я написал ajax для статического идентификатора. Я хочу преобразовать его в динамический идентификатор, но не знаю, как преобразовать его.

Здесь id это textbox1, у меня есть textbox1 to textbox10 и rate1 to rate10, который генерируется динамически. Так как это сделать?

 $(document).on('change','#textbox1',function () {
        var prod_id=$(this).val();
        var a=$(this).parent();
        console.log(prod_id);
        var op="";
        $.ajax({
            type:'get',
            url:'{!!URL::to('search')!!}',
            data:{'id':prod_id},
            dataType:'json',//return data will be json
            success:function(data){
                console.log("price");
                console.log(data.rate);
                    // here price is column name in products table data.coln name
                a.find('#rate1').val(data.rate);
            },
            error:function(){}
        });
    });

Answer 1

Использовать класс вместо id

Создание динамического текстового поля с атрибутом класса

<input type="text" name="prod_id" class="_my_textbox">

В коде js:

$(document).on('change', '._my_textbox' ,function () {
        var prod_id=$(this).val();
        var a=$(this).parent();
        console.log(prod_id);
        var op="";
        $.ajax({
            type:'get',
            url:'{!!URL::to('search')!!}',
            data:{'id':prod_id},
            dataType:'json',//return data will be json
            success:function(data){
                console.log("price");
                console.log(data.rate);
                    // here price is column name in products table data.coln name
                a.find('#rate1').val(data.rate);
            },
            error:function(){}
        });
    });

Answer 2

Поскольку вы используете элемент select, вы можете использовать опору onchange и назначить функцию с идентификаторами, чтобы вы могли использовать ее в своем js. Динамический идентификатор должен исходить из сценария PHP следующим образом:

$stmt = $DBcon->prepare("SELECT txtbx_id, role_id FROM your_table WHERE you_conditions_if_u_have_any");
$stmt->execute();
$row = $stmt->fetchAll();
foreach ($row as $rows) {
    $txtbx_id= $rows['txtbx_id'];
    $role_id= $rows['role_id'];
    echo  '

    <div class="card">
       <select onchange="yourfunction('.$txtbx_id.', '.$role_id.')" >
          ....
       </select>
    </div> 
    ';
}

Тогда в вашем js вместо изменения документа используйте функцию с идентификаторами в качестве переменных, например:

function yourfunction(textbox_id, role_id){
   // use the ids which are affected in here
   var prod_id=$(this).val();
   var a=$(this).parent();
   console.log(prod_id);
   var op="";
   $.ajax({
       type:'get',
       url:'{!!URL::to('search')!!}',
       data:{'id':prod_id},
       dataType:'json',//return data will be json
       success:function(data){
           console.log("price");
           console.log(data.rate);
              // here price is column name in products table data.coln name
           a.find('#rate1').val(data.rate);
       },
       error:function(){}
   });
});