Блог

У меня есть два поля ввода с одинаковым именем класса и одинаковыми данными.

Вот мое поле ввода, сгенерированное циклом while

 <tr>
  <td>                                   
  <input onchange="mySubmit(this.form)" class="ot_value" name="ot_value" type="text" value="10">
  <input type="hidden" name="ot_id" class="ot_id" value="1">                                  
 </td>
</tr>
<tr>
  <td>
  <input onchange="mySubmit(this.form)" class="ot_value" name="ot_value" type="text" value="11">
  <input type="hidden" name="ot_id" class="ot_id" value="2">                                  
  </td>
</tr>
 

Я пытался отправить данные с ajax на php, когда пользователь меняет какое-либо значение.

Вот мой jquery

 function mySubmit(theForm) {
    var ot_value= $(".ot_value").val();
    var ot_id= $(".ot_id").val();
    $.ajax({
       type:"post",
         url:"../apis/update_ot.php",
         data: "ot_value="   ot_value  "amp;ot_id="   ot_id,
            success:function(data){   
            alert(data);
       }
        
    });
}
 

Я смог отправлять данные, когда пользователь изменяет какие-либо данные поля ввода. Но проблема в том, что он принимает только данные 1-й строки.

Как я могу получить точные данные о том, что пользователь изменяет в поле ввода.

У вас есть jQuery, используйте его

уберите onchange="mySubmit(this.form)" с поля и сделайте

 $(function() {
  $(".ot_value").on("change", function() {
    const ot_value = $(this).val();
    const ot_id = $(this).next(".ot_id").val();
    console.log("about to submit",ot_value,ot_id)
    $.ajax({
      type: "post",
      url: "../apis/update_ot.php",
      data: "ot_value="   ot_value   "amp;ot_id="   ot_id,
      success: function(data) {
        alert(data);
      }
    });
  })
}) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody>

    <tr>
      <td>
        <input class="ot_value" name="ot_value" type="text" value="10">
        <input type="hidden" name="ot_id" class="ot_id" value="1">
      </td>
    </tr>
    <tr>
      <td>
        <input class="ot_value" name="ot_value" type="text" value="11">
        <input type="hidden" name="ot_id" class="ot_id" value="2">
      </td>
    </tr>
  </tbody>
</table>