Question

我要感谢你们到目前为止的答复和帮助，我很高兴，但是请您不要对我感到厌倦，我不介意。谢谢。

请为我的动态表提供帮助，除了我为每个动态添加的行的onchange事件外，其他一切似乎都工作正常，它仅插入第一行，但是当我从第二个添加的行中选择一个选项时，要从数据库更新的字段保持空白。

我使用警报进行检查，并且onchange似乎在所有行上都起作用，只是对所要求的字段进行更改的只是第一行。贝娄是我的代码供您审核。

页面顶部的php脚本，用于填充数据库中的选择选项数据

<?php
    $query1 = "SELECT * FROM products";
    $result1 = mysqli_query($con, $query1);
    $options = "";
    while($row3 = mysqli_fetch_array($result1))
    {
        $options = $options."<option value='$row3[1]'>$row3[2]</option>";
    }

?>

我的Javascript

<SCRIPT language="javascript">
//function that increases the table row
function addRow(dataTable) {
    var table = document.getElementById("dataTable");
    var rowCount = table.rows.length;
    if (rowCount < 4) { // limit the user from creating fields more than your limits
        var row = table.insertRow(rowCount);
        var colCount = table.rows[1].cells.length;
        row.id = 'row_'+rowCount;
        for (var i = 0; i < colCount; i++) {
            var newcell = row.insertCell(i);
            newcell.outerHTML = table.rows[1].cells[i].outerHTML;            
        }
        var listitems= row.getElementsByTagName("input")
        for (i=0; i<listitems.length; i++) {
            listitems[i].setAttribute("oninput", "calculate('"+row.id+"')");
        }

    } else {
        alert("Maximum Row Reached.");
    }
}
//function that reduces the table row
function deleteRow(dataTable) {
    var table = document.getElementById("dataTable");
    var rowCount = table.rows.length;
    for (var i = 1; i < rowCount; i++) {
        var row = table.rows[i];
        var chkbox = row.cells[0].childNodes[0];
        if (null !== chkbox && true === chkbox.checked) {
            if (rowCount <= 2) { // limit the user from removing all the fields
                alert("Cannot Remove all the Rows.");
                break;
            }
            table.deleteRow(i);
            rowCount--;
            i--;
        }
    }
}
//function that handles the summing of each row & all last column
function calculate(elementID) {
    var mainRow = document.getElementById(elementID);
    var myBox12 = mainRow.querySelectorAll('[id=item')[0].value;
    var myBox23 = mainRow.querySelectorAll('[id=descript')[0].value;
    var myBox1 = mainRow.querySelectorAll('[id=uprice')[0].value;
    var myBox2 = mainRow.querySelectorAll('[id=price')[0].value;
    var total = mainRow.querySelectorAll('[id=qty')[0];
    var multiplier = Number(myBox2) || 0;
    var myResult1 = myBox1 * multiplier;
    var mresult = myResult1.toFixed(2);                          
    total.value = mresult;
    var confirm = 10;
    var colCount;
    var table = document.getElementById("dataTable");
    let rows = [...table.querySelectorAll('[name*=qty]')];
    let total2 = rows.reduce((prev, current)=>{
        let to_be_added = Number(current.value) || 0;
        return prev + to_be_added;
    },0)
    console.log(total2);
    $("#sumtotal").val(total2.toFixed(2));
    return total2;
}
//function that gets the amount due(balance left)
function amountDue() {
    var amount =  parseFloat($("#sumtotal").val());
    var paidd =   parseFloat($("#paid").val());
    var balance =  amount - paidd;
    $("#due").val(balance.toFixed(2));
    $("#due2").val(balance.toFixed(2));
    //return total2;
}
//function that updates #uprice and #descript from the data base onchange of the select box
function get_item(elementID){
    $.ajax({
    method:"POST",
    url:"get_price.php",
    data:{item2:$("#item").val()},
    success:function(data){
        alert(data);
        if(data!='0'){
            //$('#descript').val(data);
          $('#uprice').val(data);
        }else{
            alert('Description not available');
        }
    }
});
    $.ajax({
        method:"POST",
        url:"get_item.php",
        data:{item:$("#item").val()},
        success:function(data){
            alert(data);
            if(data!='0'){
               $('#descript').val(data);
            }else{
            alert('Description not available');
            }
        }
    });

}

</SCRIPT>

我的html代码

<table id="dataTable" class="form">
    <thead>
        <th style="width:20px"></th>
        <th>Item</th>
        <th>Description</th>
        <th>Unit Price</th>
        <th>Item Units</th>
        <th>Sub Total (#)</th>
    </thead>
    <tbody>
        <tr id='row_0'>
            <td><input style="width:20px" type="checkbox" name="chkbox[]" />
            </td>
            <td>
                <select required="required" name="item" onchange="get_item('row_0')" id="item" placeholder="Item">
                    <option value="0"> select an item</option>
                    <?php echo $options;?>
            </select>
            </td>
            <td>
                <input type="text" required="required" class="small" name="descript" id="descript" placeholder="Description">
            </td>
            <td>
                <input type="text" required="required" name="uprice[]" oninput="calculate('row_0')" id="uprice" placeholder="unit price">
            </td>
            <td>
                <input type="text" required="required" class="small" name="price[]" oninput="calculate('row_0')" id="price" placeholder="units" value="0">
            </td>
            <td>
                <input type="text" required="required" class="small" name="qty[]" id="qty" placeholder="sub total" value="0.00" readonly="readonly" style="background-color: white">
            </td>

        </tr>
    </tbody>
</table>
<span id="mee"></span>
<input type="button" value="Add" onClick="addRow('dataTable')" class="butto" />
<input type="button" value="Remove" onClick="deleteRow('dataTable')" class="butto"/>

Answer 1

此处已被修改，但仍然：How to submit form on change of dropdown list?。用户提交表单时，请通过isset（$ _ POST ['name']）

从databse使用php获取

Answer 2

我能够通过对get_item（）javascript函数进行一些更改来解决此问题

function get_item(dropDown){
 $.ajax({
    method:"POST",
    url:"get_item.php",
    data:{item:dropDown.value},
    success:function(data){
        alert(data);
        if(data!='0'){
           $($(dropDown).parents('tr')[0]).find('input#descript').val(data);
            //$('#uprice').val(data);
        }else{
            alert('Description not available');
        }
    }
});
}

谢谢大家。

动态表中的Onchange仅更新第一行中的输入文本框

2 个答案: