Question

我想计算JavaScript函数的总价。如果用户输入数量，则总价将自动显示在“总价”字段中。

     <div class="form-group">

<p class="form-control" name="price" id="price" readonly><span>Price (mmk):</span> <?php echo $row['Price'] ?></p>
</div>
<div class="form-group">
<input name="qty" id="qty" type="number" class="form-control" placeholder="Quantity" required>
</div>

<div class="form-group">
<label>Total price (mmk):</label>
<input class="form-control" type="number" name="result" id="result" onClick="total()" disabled> 
</div>


function total() {
  var quantity = parseInt(document.getElementById('qty').value);

  var price = parseInt(document.getElementById('price').value);

  var total = price * quantity;

  document.getElementById('result').innerHTML = total;
  document.getElementById('result').value = total;
}

Answer 1

根据您的输入元素，这是我认为您应该做的。

<div class="form-group">

<p class="form-control" name="price" id="price" readonly><span>Price (mmk):</span> <?php echo $row['Price'] ?></p>

</div>
<div class="form-group">
<input name="qty" id="qty" onkeyup="total()"" type="number" class="form-control" placeholder="Quantity" required>
</div>

<div class="form-group">
<label>Total price (mmk):</label>
<input class="form-control" type="number" name="result" id="result" disabled> 
</div>

<script type="text/javascript">

    function total() {
      var quantity = parseInt(document.getElementById('qty').value);

      var price = <?php echo $row['Price'] ?>;

      var total = price * quantity;

      document.getElementById('result').value = total;
    }

</script>

从上面的代码中，请注意

变量名称区分大小写
我正在使用onkeyup事件，以便每次用户键入值并释放键时，该函数都会重新计算金额。

Answer 2

您要查找的是onChange或keyup事件。

我在下面为您创建了一个基本示例

const qtyEl = document.getElementById('quantity');
const valEl = document.getElementById('value');
const totalEl = document.getElementById('autoValue');

const setTotal = () => {
  let qty = qtyEl.value;
  let value = valEl.value;
  totalEl.innerHTML = qty * value;
}

<label for="quantity">Qty:</label>
<input type="text"  onkeyup="setTotal()" id="quantity" value=1>

<label for="value">Value:</label>
<input type="text" onkeyup="setTotal()" id="value" value=1>

<p id="autoValue">value will go here</p>

让我知道您是否有任何问题：）

Answer 3

尝试以下代码。提交表单后，您将获得如下所示的值。

$price = $_POST['price'];
   $Quantity = $_POST['qty'];
   $result = $_POST['result'];

代码。

 
     function total() {
  var quantity = parseInt(document.getElementById('qty').value);

  var price = parseInt(document.getElementById('price').value);

  var total = price * quantity;

  document.getElementById('show_result').value = total;
  document.getElementById('result').value = total;
}

<div class="form-group">
	<!-- Create a input hidden field and put the price as value -->
	<input type="hidden" class="form-control" name="price" id="price" value="10">


	<!-- display the price value in span -->
	<span>Price (mmk):</span> 10</p>

</div>

<div class="form-group">
<input name="qty" id="qty" type="number" class="form-control" placeholder="Quantity" onkeyup="total()" required>
</div>

<div class="form-group">
<label>Total price (mmk):</label> 
<!-- Create a input hidden field result and put the total value onkeyup the  Quantity field-->
<input class="form-control" type="hidden" name="result" id="result"> 

<!-- Create read only  text input field  and put the total value onkeyup the Quantity field to display -->
<input class="form-control" type="number" id="show_result"  readonly> 
</div>

我可以在文本字段中自动计算总价吗？

3 个答案: