ajax第一个输入值未定义答案

【问题标题】：ajax first input value undefinedajax第一个输入值未定义
【发布时间】：2021-11-22 17:48:36
【问题描述】：

这是我的代码，

function getProduct(){
                $.ajax({
                    url:"./services/getproductlist.php",
                    method: "GET",
                    success: function(res){
                        $("#product-list").html('');
                        var count = 1;
                        console.log(res);
                        res.forEach(function(item){
                            var row = $("<tr></tr>");
                            var col1 = $("<td>" + count + "</td>");
                            var col2 = $("<td>" + item['nama_produk'] + "</td>");
                            var col3 = $("<td>" + item['harga_produk'] + "</td>");
                            var col4 = $("<td><input type='number' name='inp' id='inpqty' required value = '<?php echo 2 ?>'></input></td>");
                            
                            var btn = $('<td scope="col"></td>');
                            var add = $('<a href="#" id="add-btn"><svg class="bi me-2" width="16" height="16" style="color: black; margin-left: 10px;"><use xlink:href="#basket"/></svg></a>');
                            var add2 = $('<a href="#" id="inp-btn"><svg class="bi me-2" width="16" height="16" style="color: black; margin-left: 10px;"><use xlink:href="#basket"/></svg></a>');

                            add.data('id_produk', item['id_produk']);
                            add2.data('qty', $("#inpqty").val());
                            console.log(item['id_produk']);
                            console.log(item['harga_produk'] * $("#inpqty").val());
                            

                            col1.appendTo(row);
                            col2.appendTo(row);
                            col3.appendTo(row);
                            col4.appendTo(row);
                            add.appendTo(btn);
                            add2.appendTo(btn);
                            btn.appendTo(row);
                            count++;
                            $("#product-list").append(row);
                        });
                        $("#tableImage").DataTable();
                    },
                    error: function(){
                        alert('fail');
                    }
                });
            }

当我尝试console.log($("#inpqty").val()) 时，第一个值总是返回undefined 而不是其他值。

我试图找到问题，但我找不到，有没有人可以帮助我？

【问题讨论】：

你为什么使用value = <?php echo 2 ?>？而您可以简单地添加value='2'

标签： html ajax

【解决方案1】：

在for循环内：

res.forEach(function(item){
    var row = $("<tr></tr>");
    var col1 = $("<td>" + count + "</td>");
    var col2 = $("<td>" + item['nama_produk'] + "</td>");
    var col3 = $("<td>" + item['harga_produk'] + "</td>");
    var col4 = $("<td><input type='number' name='inp' id='inpqty' required value = '<?php echo 2 ?>'></input></td>");

    ...

    add2.data('qty', $("#inpqty").val());
    console.log(item['id_produk']);
    console.log(item['harga_produk'] * $("#inpqty").val());

    ...

    $("#product-list").append(row);
});

第一次查找inpqty时，尚未将元素添加到页面正文中，product-list。

这就是它返回NaN的原因

我不确定这个值是否是静态的，但有信息。你提供，你可以这样做：

console.log(item['harga_produk'] * <?php echo 2 ?>);

【讨论】：

【解决方案2】：

您将item['harga_product'] 与该元素相乘，该元素中不存在该元素。你第一次看到它循环，还没有inpqty插入到文档中，因此没有价值和未定义，我认为你可以尝试在$("#product-list").append(row);下方控制台它们的解决方案

或

当你乘法时 const qtyValue = isNaN(parseInt($("#inputqty").val())) ? 0 : $("#inputqty").val()

这里我在 element 没有被定义为默认值时使用 0。当你乘 item['harga_produk'] * qtyValue

【讨论】：