javascript - 使用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);
}); 

这是 javascript 代码这是我的代码，用于在迭代的一个文本字段中获取值

            <?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

对于不同 id 的元素，你可以这样做:

          <?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，包括按钮“Order”，只需添加产品本身的标识符“id”，因此每个“id”都会不同。每个按钮“Order”是否属于同一个类，对于所有按钮“Order”都是相等的，但对于 id 总是不同的。随后，在该类的 onclick 按钮上获取属性“id”的值并删除所有通用部分，在您的情况下为“order-”，因此它仍然是唯一的部分(id)，您可以通过它找到连接的元素这样就得到了带有id的通用部分。