Получить значение из итерированного текстового поля с помощью javascript

Question

У меня есть одно текстовое поле, которое было циклом много раз, и оно имеет значение, которое поступает из базы данных, и я хочу получить значение каждого текстового поля, которое было циклом много раз первое текстовое поле работает, но когда я нажимаю, но другое текстовое поле это не похоже на работу здесь является

$("#order").click(function() 
{ 
    var IDno_textfield = $("#IDno_textfield").val(); 
    var name_textfield = $("#name_textfield").val(); 

    alert("ID no: " + IDno_textfield + " " + " Name: " + name_textfield); 
}); 

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

  <?php 
       $c = 0; 
       if($result->num_rows > 0) 
       {         
        while($row = $result->fetch_assoc()) 
        {          
      ?>   <tr> 
          <td> 
           <img src = "data:image/jpeg; base64 , <?php echo base64_encode($row['product_image']); ?>"height = "250" width = "330"> 
          <br> 
            <div id = "order"> 
              Order now 
            </div> 
          </td>      
          <td> 
           No. 
            <input type = "text" value = "<?php echo $row['product_IDno']; ?>" 
            id = "IDno_textfield"> 
            <br> 
           Name: 
            <input type = "text" value = "<?php echo $row['product_name']; ?>" 
            id = "name_textfield"> 
           <br> 
           Price: 
             <input type = "text" value = "<?php echo $row['product_price']; ?>"id = "production_textfield"> 
           <p> 
            Description: <?php echo $row['product_description']; ?> 
           </p> 
          </td> 
         </tr> 
      <?php 
        } 
       } 
       else 
       { 
        echo "No Menu Found"; 
       } 
      ?> 

И это для кода php, который извлекает данные в текстовое поле и перебирать текстовое поле много раз

это результат он работает только один раз при первом текстовом поле, а не в другом текстовом поле. я буду рад, если вы поможете мне спасибо

Answer 1

для различных идентификаторов элементов вы можете сделать это:

  <?php 
      $c = 0; 
      if($result->num_rows > 0) 
      {         
       while($row = $result->fetch_assoc()) 
       {          
     ?>  
    <tr> 
        <td> 
         <img src="data:image/jpeg; base64 , <?php echo base64_encode($row['product_image']); ?>"height="250" width="330"> 
        <br> 
          <div id="order-<?php echo $row['product_IDno']; ?>" class="order"> 
            Order now 
          </div> 
        </td>      
        <td> 
         No. 
          <input type="text" value="<?php echo $row['product_IDno']; ?>" id="IDno_textfield-<?php echo $row['product_IDno']; ?>"> 
          <br> 
         Name: 
          <input type="text" value = "<?php echo $row['product_name']; ?>" id="name_textfield-<?php echo $row['product_IDno']; ?>"> 
         <br> 
         Price: 
           <input type="text" value="<?php echo $row['product_price']; ?>" id="production_textfield-<?php echo $row['product_IDno']; ?>"> 
         <p> 
          Description: <?php echo $row['product_description']; ?> 
         </p> 
        </td> 
       </tr> 
    <?php 
      } 
     } 
     else 
     { 
      echo "No Menu Found"; 
     } 
    ?> 

и Javascript

$(".order").on('click', function() 
{ 
    var productID = $(this).prop('id').replace('order-', ''); 

    var IDno_textfield = $("#IDno_textfield-" + productID).val(); 
    var name_textfield = $("#name_textfield-" + productID).val(); 

    alert("ID no: " + IDno_textfield + " " + " Name: " + name_textfield); 
}); 

Каждый элемент на странице должен иметь уникальный идентификатор "идентификатор". К идентификаторам элементов в цикле, включая кнопку «Заказ», просто добавьте идентификатор «id» самого продукта, и поэтому каждый «идентификатор» будет отличаться. Каждая кнопка «Заказ» относится к тому же классу, что и для всех кнопок «Заказ», но всегда для id. Впоследствии на кнопке onclick на этот класс берется значение свойства «id» и удаляется общая часть для всех, в вашем случае «order-», поэтому остается единственной частью (id), с помощью которой вы можете найти элементы, конкатенирующие общая часть с идентификатором, полученным таким образом.

Answer 2

Попробуйте это:

$("#order").click(function() { 
var IDno_textfield = $(this).parent('tr').find("#IDno_textfield").val(); 
var name_textfield = $(this).parent('tr').find("#name_textfield").val(); 
alert("ID no: " + IDno_textfield + " " + " Name: " + name_textfield); 
}); 

Answer 3

Попробуйте <?php $c = 0; $count = 0; if($result->num_rows > 0) {
while($row = $result->fetch_assoc()) { $count++;
?> <tr> <td> <img src = "data:image/jpeg; base64 , <?php echo base64_encode($row['product_image']); ?>"height = "250" width = "330"> <br> <div id = "order" data-attr = "<?php echo $count; ?>"> Order now </div> </td>
<td> No. <input type = "text" value = "<?php echo $row['product_IDno']; ?>" id = "IDno_textfield_<?php echo $count; ?>"> <br> Name: <input type = "text" value = "<?php echo $row['product_name']; ?>" id = "name_textfield_<?php echo $count; ?>"> <br> Price: <input type = "text" value = "<?php echo $row['product_price']; ?>"id = "production_textfield_<?php echo $count; ?>"> <p> Description: <?php echo $row['product_description']; ?> </p> </td> </tr>
<?php } } else { echo "No Menu Found"; } ?>

и событие щелчка изменится .......

$("#order").click(function() 
{ 
    var id = $(this).attr('data-attr') 
    var IDno_textfield = $("#IDno_textfield_"+id).val(); 
    var name_textfield = $("#name_textfield_"+id).val(); 

    alert("ID no: " + IDno_textfield + " " + " Name: " + name_textfield); 
});