使用数据库onchange中提供的ajax值进行自动计算 - Autocompute using ajax values provided in the database onchange

Autocompute using ajax values provided in the database onchange

本文关键字：计算 ajax 数据库 onchange | 更新日期: 2023-09-27

我根本不知道如何使用它。不过，我正在考虑使用javascipt数组。

我在这里有一个选择选项，其中包含数据库中的值，选择是动态的。"添加行"按钮将添加另一行选项选择：

<td>Items </td>
<td style="text-align:left;">
   <INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />
   <INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />
   <TABLE id="dataTable" width="350px" >
      <TR>
         <TD><INPUT type="checkbox" name="chk[]"/></TD>
         <TD>
            <select name="ItemNo[]" id="select" value="ItemNo" onChange="this.disabled=true;">  
            <?php 
               $sql2="select * from jewelry_system.item where NumStored !='0' order by ItemName asc"; 
               $result2 = mysql_query($sql2);
               while($row2=mysql_fetch_array($result2)){
            ?>
             <option value="<?php echo $row2['ItemNo']?>"> 
                <?php echo $row2['ItemName'];?>     
                Php:<?php echo $row2['SalePrice'];?> </option>
             <?php } ?>
             </select>
          </TD>
       </TR>
    </TABLE>
</td>
</tr>

以下是ajax应该更改的内容？

<tr>
   <td>Total Payment (Php):</td>
   <td> <div id="tpayment">0.00</div> </td>
</tr>

我想在选择选项中更改值时计算总付款。既然值只能更改一次，我应该使用数组吗？我对ajax一无所知，曾尝试在w3schools学习，但失败了。

请感谢

您可能不需要AJAX，除非您需要在单击某种"提交"按钮之前在数据库中设置一些内容。当您使用PHP构建页面时，看起来您应该能够将所有信息存储在所选内容中。您需要使用javascript在文档中显示/隐藏所选内容。

添加；updateTotal（）到您选择的onChange事件：

<select name="ItemNo[]" id="select1" value="ItemNo" onChange="this.disabled=true;updateTotal()">

然后将此函数添加到您的页面或javascript文件中：

<head>
    <script language="javascript" type="text/javascript">
        function updateTotal() {
            var dropdown = document.getElementById('select1');
            var total = 0;
            for (var i=0; i<dropdown.length; i++){
                if (dropdown.options[i].selected) {
                    total += dropdown.options[i].value;
                }
            }
            document.getElementById('tpayment').innerHTML = total;
        }
    </script>
</head>

由于您要添加/删除行，因此需要跟踪它们，就像您提到的数组一样——可能是全局数组。

在javascript的开头，声明一个全局数组来存储数据表，如下所示：

var selects = new Array();

您还需要更新您的添加/删除呼叫：

<INPUT type="button" value="Add Row" onclick="addRow('dataTable','select1')" />
<INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable','select1')" />

然后，当您调用addRow函数时，执行以下操作：

function addRow(rowname,selectname) {
    /* ... original function stuff ... */
    selects.push(selectname); /* this will add the selectname to the selects array */
}

同样，当您调用removeRow函数时，请执行以下操作：

function removeRow(rowname,selectname) {
    /* ... original function stuff ... */
    selects.splice(selects.indexOf(selectname),1);
    updateTotal(); /* since selected items might have been removed */
}

最后，我们将修改我们原来的函数如下：

function updateTotal() {
    var total = 0;
    for (var h=0; h<selects.length; h++) {
        var dropdown = document.getElementById(selects[h]);
        for (var i=0; i<dropdown.length; i++){
            if (dropdown.options[i].selected) {
                total += dropdown.options[i].value;
            }
        }
        document.getElementById('tpayment').innerHTML = total;
    }
}