javascript选择更改字段价格与折扣onchange [英] javascript select change field price with discount onchange

问题描述

我有一个包含Sub-Total，Discount和Total的html表单。 Discount的选择下拉列表有5％，10％和20％的值。 Sub-Total的选择下拉列表有200美元，100美元和20美元的价值。另一个输入文本字段获得总计形式的子总计和折扣计算。

I have an html form with Sub-Total, Discount and Total. The select drop down for Discount has 5%, 10% and 20% values. The select drop down for Sub-Total has $200, $100 and $20 values. Another input text field gets the Total form a calculation on the Sub-Total and Discount.

Discount:
<select class="select" name="discount">
  <option value="5" selected>5% discount</option>
  <option value="10">10% discount</option>
  <option value="20">20% discount</option>
</select>

Sub-Total:
<select class="select" name="discount">
  <option value="100" selected>$100</option>
  <option value="200">$200</option>
  <option value="50">$50</option>
</select>

Total:
<input type="text" name="price" value="<?php echo $db['sellingprice'] ?>">

我需要的是：

如果输入小计有一个值可以说是100美元而折扣给的小计则是10％然后总计应该变成90美元。

If the input Sub-Total has a value lets say $100 and the Discount to give the Sub-Total is 10% then the Total should change to $90.

有没有办法每当小计价格或折扣价值发生变化时，每次更新输入文本框中的总价格？

Is there any way to update the total price in the input text box every time whenever the Subtotal Price or Discount values are changed?

要完成的计算是：

total = subTotal - （subTotal *（discount / 100））

total = subTotal - (subTotal * (discount / 100))

我能够用 .onmouseout 做类似的事情但是我的工作方式并不理想。

I was able to do something similar with .onmouseout but it isn't working quite how I want it to.

<script>
var discount = 10; 
document.getElementById("sellingprice").onmouseout = function(){
document.getElementById("price").value = parseFloat(document.getElementById("sellingprice").value) * (1.00 - discount)
}
</script>

推荐答案

这是指向 jsfiddle 如果你想自己玩它

here is a link to a jsfiddle if you would like to play with it yourself

使用<仅限code> javascript 和 html 。这将使用选定的值更新文本框 onchange 。

Using javascript and html only. This will update the textbox with the value selected onchange.

通过设置 onchange <选择标记上的/ code>属性，您将 updateInput（）函数注册为 onchange 事件。

By setting the onchange attribute on the select tag, you register the updateInput() function as a listener to the onchange event.

然后在函数内部，您可以使用 document.getElementsByName（）来访问元素并操纵它们值。请注意， document.getElementsByName（）返回一个类似数组的元素集合，因此要求我们选择第一个元素，如此

Then inside the function you can use document.getElementsByName() to access the elements and manipulate their values. Notice that document.getElementsByName() returns an array-like collection of elements, therefore requiring us to select the first element like so

document.getElementsByName("elementNameGoesHere")[0]

我们想要选择的元素的索引在这里-------- ^

index of the element we want to select goes here --------^

<select class="select" name="discount" onchange="updateInput()">
  <option value="5" selected>5% discount</option>
  <option value="10">10% discount</option>
  <option value="20">20% discount</option>
</select>

<select class="select" name="cost" onchange="updateInput()">
  <option value="500" selected>$500</option>
  <option value="100">$100</option>
  <option value="20">$20</option>
</select>

<input type="text" name="price" value="">

<script>
function updateInput(){
    var discount = document.getElementsByName("discount")[0].value;
    var cost = document.getElementsByName("cost")[0].value;
    document.getElementsByName("price")[0].value = cost - (cost * (discount / 100));
}
</script>

这是指向 jsfiddle 如果您想自己玩它

here is a link to a jsfiddle if you would like to play with it yourself

这篇关于javascript选择更改字段价格与折扣onchange的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！