JavaScript表格自动计算_JavaScript

我正在尝试创建一种表单，当用户使用击键时该表单会自动更改文本框。

这个小提琴说明了我正在尝试什么，但是我没有成功。

本质上，我希望第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>

Java脚本

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);
}

您的代码中有很多错误-请阅读以下内容以帮助您。

的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);
};

您提到了PHP，但是您可以仅使用JavaScript即时更新这些字段。 您需要记住为输入字段分配ID，然后使用GetElementById进行字段之间的计算。 我也觉得ONCHANGE比onkeyup更好。

这是一个小提琴： :

的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"/>

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;
}

我还面临这样的问题..i开发了一些和平的代码，该代码用于使用文本字段自动计算....。

  <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="ab"></output> </form> </body> </html>

JavaScript表格自动计算

问题描述

1楼

2楼

3楼