CODEWITHSUNDEEP
javascripthtmlforms
Malcolm
Malcolm

Reputation: 1

Javascript form automatic calculation

I am trying to create form which automatically alters a text box when the user uses keystrokes .

This fiddle illustrates what I am attempting however I have had no success.

Essentially I want the 3rd text box to show the "Number of People" multiplied by the "Price", how can I do this?

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/

Upvotes: 0

Views: 4111

Answers (4)

Debarshi
Debarshi

Reputation: 1

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

Upvotes: 0

Gopal Reddy
Gopal Reddy

Reputation: 36

Hai cool this type of problem i also faced so..i develop a some peace of code which is used to calculate automatically using text fields .... in this code ..

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

Upvotes: 0

Fraser
Fraser

Reputation: 17039

There are quite a few errors in your code — take a look at the following to help you.

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

Upvotes: 2

m1xolyd1an
m1xolyd1an

Reputation: 535

You mentioned PHP but you can update these fields on the fly with just javascript. You need to remember to assign your input fields with IDs and then use GetElementById to do the calculations between the fields. Also I feel ONCHANGE works better than onkeyup.

Here's a fiddle: 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;
}

Upvotes: 0

Related Questions