Question

我尝试实现两个输入字段的总计，并在选择下拉选项后从数据库动态获取它们的值。 html代码和sql查询如下所示：

<select name="getData" ID="getData" onchange="getData()">
    <option value="Select">Select Subscription Package</option>
    <?php
    $sql = "SELECT * FROM package WHERE status = 1";
    $result = $connect->query($sql);
    while($row = mysqli_fetch_row($result)){ 
        echo '<option data-price="'.$row[4].'" value='.$row[0].'> '.$row[1].' </option>';
        }
    ?>
</select>
<input type="text" id="price1" name="price1"/>
<input type="text" id="price2" name="price2"/>
<input type="text" id="totalAmount" name="totalAmount" onblur="totalCalc()">

当SELECT选项更改时，price1和price2的值也会更改。现在，我需要通过javascript获取这两个字段的总计。 js代码如下：

<script>
    function totalCalc() {
        var A = document.getElementById("price1").value;
        var B = document.getElementById("price2").value;
        var C = A + B;
        document.getElementById("totalAmount").value = C;
    }
</script>

我得到了总计，但需要单击“总计”字段。我希望计算应该在前两个字段动态获得值之后立即自动完成。

感谢您的帮助。

Answer 1

您应该只在指向change函数的两个输入上设置totalCalc事件处理程序，然后在getData()函数的结尾手动触发{{1} }事件之一。

如果change中的代码是异步的，则手动触发getData事件的代码应包含在操作的change处理程序中。

关于UI的注释。如果自动填充了两个价格字段，并且用户不会在其中手动输入任何内容，则禁用这些字段可能是适当的。关于最终总数，那里的输入可能根本没有意义-您只需要显示结果，这样success元素就可以使用。

此外，不应使用内联HTML事件属性（span，onclick等）。有 many reasons 为何20多年的这项技术需要牺牲自己应得的死亡，但是由于许多人没有花时间真正地学习JavaScript和现代最佳实践，他们只是复制使用他们的别人的代码，然后继续他们的快乐。

因此，在下面的代码中，我将展示如何使用遵循最佳实践的，基于标准的现代代码来解决此问题。

onchange

// Get references to the DOM elements you'll need to work with
let a = document.getElementById("price1");
let b = document.getElementById("price2");
let total = document.getElementById("totalAmount");
let select = document.getElementById("getData");
let price1 = document.getElementById("price1");
let price2 = document.getElementById("price2");

// Set up event handlers in JavaScript, not HTML
select.addEventListener("change", getData);
price1.addEventListener("change", totalCalc);
price2.addEventListener("change", totalCalc);

function totalCalc() {
  total.textContent = +a.value + +b.value;
}

function getData(){
  // This is just mean to replicate what SQL does
  price1.value = 15;
  price2.value = 27;

  // Manually trigger the change event for either one of the inputs
  // If the existing code in getData is asynchronous, then this code
  // should be added to the "success" callback. If not, it can just be
  // placed at the end of the function as I'm showing it here.
  var event = new Event('change');
  price1.dispatchEvent(event);
}

当其他字段在javascript中具有动态值时，自动更改total字段的值

1 个答案: