Javascript form automatic calculation

Question

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/

You have to place the code in the head, not on load event: jsfiddle.net/b87s5hou/1 — DontVoteMeDown
– DontVoteMeDown, Commented Jul 16, 2015 at 17:21
@DontVoteMeDown That's not true at all. As long as the code is added to the head or run through a onload/DOMContentLoaded event then it will work all the same. — Mike Cluck
– Mike Cluck, Commented Jul 16, 2015 at 17:26
@MikeC when user attach the event as he did onkeyup="calculate()" he attached a function in global escope, but when the function is declared inside the onload event, it is not global. In the head tag, outside any block it is global, therefore it can be called by the event. — DontVoteMeDown
– DontVoteMeDown, Commented Jul 16, 2015 at 17:31
@DontVoteMeDown You're right. I so seldom place function calls directly on an element that I forgot this. — Mike Cluck
– Mike Cluck, Commented Jul 16, 2015 at 17:33

Sebastian Simon · Accepted Answer · 2015-07-16 18:39:31Z

2

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

edited Jul 16, 2015 at 18:39

Sebastian Simon

19.8k8 gold badges61 silver badges88 bronze badges

answered Jul 16, 2015 at 17:55

Fraser

17.2k8 gold badges58 silver badges112 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Sebastian Simon Over a year ago

These two lines could be shortened to var text1 = parseInt(qty.value, 10) || 0; var text2 = parseFloat(cost.value) || 0;.

Sebastian Simon Over a year ago

Also, you could move onkeyup="calculate()" to the <form> instead of the <input> (so that changes from both fields get applied immediately) and change the last line to output.value = (q * c).toFixed(2); (so that you never get a price of 2199.8900000000003).

Fraser Over a year ago

Why not post an answer or edit this one? I cleaned up some code quickly to help someone - get a grip man!

m1xolyd1an · Accepted Answer · 2015-07-16 17:52:49Z

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

Gopal Reddy · Accepted Answer · 2017-06-08 03:03:53Z

0

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>

answered Jun 8, 2017 at 3:03

Gopal Reddy

361 silver badge5 bronze badges

Comments

Debarshi · Accepted Answer · 2021-08-28 11:15:52Z

0

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

answered Aug 28, 2021 at 11:15

Debarshi

1

Collectives™ on Stack Overflow

Javascript form automatic calculation

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related