Question

我正在尝试创建在用户使用击键时自动更改文本框的表单。

这个小提琴说明了我的尝试，但是我没有成功。

基本上我希望第3个文本框显示“人数”乘以“价格”，我该怎么做？

HTML

<form action="postenquiry.php" method="post" name="myform">
    <label>Num of People</label>
    <input type="text" name="qty" />
    <br/>
    <label>Price</label>
    <input type="text" name="Cost" onkeyup="calculate()" />
    <br/>
    <input type="text" name="textbox5" />
</form>

的Javascript

function calculate() {
    if (isNaN(document.forms["myform"]["qty"].value) || document.forms["myform"]["qty"].value == "") {
        var text1 = 0;
    } else {
        var text1 = parseInt(document.forms["myform"]["qty"].value);
    }
    if (isNaN(document.forms["myform"]["Cost"].value) || document.forms["myform"]["Cost"].value == "") {
        var text2 = 0;
    } else {
        var text2 = parseFloat(document.forms["myform"]["Cost"].value);
    }
    document.forms["myform"]["textbox5"].value = (text1 * text2);
}

http://jsfiddle.net/b87s5hou/

Answer 1

您的代码中存在相当多的错误 - 请查看以下内容以帮助您。

HTML

<form action="postenquiry.php" method="post" name="myform" onkeyup="calculate()">
    <label>Num of People</label>
    <input type="text" name="qty" />
    <br/>
    <label>Price</label>
    <input type="text" name="cost" />
    <br/>
    <input type="text" name="textbox5" />
</form>

的JavaScript

var form = document.forms.myform,
    qty = form.qty,
    cost = form.cost,
    output = form.textbox5;

window.calculate = function () {
    var q = parseInt(qty.value, 10) || 0,
        c = parseFloat(cost.value) || 0;
    output.value = (q * c).toFixed(2);
};

Working example

Answer 2

您提到了PHP，但您可以使用javascript动态更新这些字段。您需要记住为输入字段分配ID，然后使用GetElementById在字段之间进行计算。另外我觉得ONCHANGE比onkeyup更好。

这是一个小提琴：http://jsfiddle.net/b87s5hou/5/

<强> HTML

<form action="postenquiry.php" method="post" name="myform">
<label>Num of People</label>    <input type="text" name="qty" id="qty" onchange="getPeople(this);"/><br/>
<label>Price</label>    <input type="text" name="cost" id="cost" onchange="calculate(this);"/><br/>
<input type="text" name="textbox5" id="textbox5"/>

<强> JS

function getPeople(input){ 
 if (isNaN(input.value)){
 input.value = 0;
 }
}    
function calculate(input){ 
 if (isNaN(input.value)){
 input.value = 0;
 }
var price = input.value;
var people = document.getElementById("qty").value;
var calc = price * people;
document.getElementById('textbox5').value = calc;
}

Answer 3

海酷这种类型的问题我也面临着这样的问题......我发展了一些代码的和平用于在此代码中使用文本字段自动计算..

＆＃13;

 <html>
<body>
<form oninput="x.value=parseFloat(a.value)*parseFloat(b.value)">
<input type="number" id="a" value="0">
<input type="number" id="b" value="50"readonly>
<output name="x" for="a b"></output>
</form>
</body>
</html>

＆＃13;

Javascript表单自动计算

3 个答案: