take user input from a Form perform calculation (order of operations) and output back into that form

Question

I'm trying to take input from one element of Form (INPUT1) and perform a calculation which would essentially OUTPUT1=((INPUT1/20).58).30 I've seen a number of examples for conversion of CM to inches etc.. But nothing with order of operations. Please help! The wall and my head have met too many times. This is what I have so far, (which doesn't work)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transititonal//EN"
""http://www.w3.org/TR/XHTML1/DTD/xhtml1-transitional.dtd">

<html>
<head></head>
<body>

<form name="TESTING">
<table border="1" width="600" height="200" cellpadding="10" cellspacing="3">
<tr><th colspan="2"><h1>TESTING</h1></th></tr>
<tr>  <th><h3>INPUT</h3></th>
<th><h3>OUTPUT</h3></th>    </tr>
<tr></tr>
<td><input type="number" name="INPUT1"/></td>
<td><input type="number" name="OUTPUT1"></td>
<table>

</form>

<script type="text/javascript">
var USERINPUT1 = document.TESTING.INPUT1.value;
var CALC1 = USERINPUT1/20;
var CALC2 = CALC1*.585;
var CALC3 = CALC2*.30;
var CALC3 = OUTPUT1;

</script>
</body>
</html>

BBog · Answer 1 · 2012-09-07T15:11:16.723

You did a couple of things incorrectly.

First of all, the input value must be read at a certain time. For example, when a button is pressed, when the input field's value changes or similar situations. In your case, it was read as soon as the document was parsed, when the input field did not have any value.

Second, you did not write the result to the output field. This line var CALC3 = OUTPUT1; redeclares the CALC3 variable and gives it the value OUTPUT1. What you want is to set the value of the field OUTPUT1 as CALC3

Try this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transititonal//EN"
""http://www.w3.org/TR/XHTML1/DTD/xhtml1-transitional.dtd">

<html>
<head></head>
<body>

<form name="TESTING">
<table border="1" width="600" height="200" cellpadding="10" cellspacing="3">
<tr><th colspan="2"><h1>TESTING</h1></th></tr>
<tr>  <th><h3>INPUT</h3></th>
<th><h3>OUTPUT</h3></th>    </tr>
<tr></tr>
<td><input type="number" name="INPUT1" id="input" onchange="calculate();"/></td>
<td><input type="number" name="OUTPUT1" id="output"></td>
<table>

</form>

<script type="text/javascript">
function calculate() {

var USERINPUT1 = document.TESTING.INPUT1.value;
var CALC1 = USERINPUT1/20;
var CALC2 = CALC1*.585;
var CALC3 = CALC2*.30;
document.TESTING.OUTPUT1.value = CALC3;

}

</script>
</body>
</html>

When the value from the first input field changes, it calls the function calculate() (onchange="calculate();") and then automatically updates the second field (you write the value just like you read it document.TESTING.OUTPUT1.value = CALC3;).

[edit] The first version of the code is pretty much like yours, so you will be able to understand it more easily, but you should also take a look at this. You had some misplaced table row tags and some untidy code, so I also cleaned it up a little. It's still far from best practice, but it's an improved version of your page

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
</head>
<body>
    <form name="TESTING">
        <table border="1" width="600" height="200" cellpadding="10" cellspacing="3">
            <tr>
                <th colspan="2">
                    <h1>TESTING</h1>
                </th>
            </tr>
            <tr>  
                <th>
                    <h3>INPUT</h3>
                </th>
                <th>
                    <h3>OUTPUT</h3>
                </th>    
            </tr>
            <tr> 
                <td>
                    <input type="number" name="INPUT1" id="input" onchange="calculate();"/>
                </td>
                <td>
                    <input type="number" name="OUTPUT1" id="output">
                </td>
            </tr>
        </table>
    </form>

<script type="text/javascript">
    function calculate() {
        var USERINPUT1 = document.TESTING.INPUT1.value,
            RESULT = (USERINPUT1/20) * .585 * .30;
        document.TESTING.OUTPUT1.value = RESULT;
    }
</script>
</body>
</html>

Chase · Answer 2 · 2012-09-07T21:01:08.270

1

Are you able to use jQuery at all?

If so, then this uses what you've provided: http://jsfiddle.net/vuYMs/

Otherwise I can modify it to work without jQuery.

EDIT:

Here's a more javascript oriented solution: http://jsfiddle.net/vuYMs/3/

var input1 = document.getElementsByName("INPUT1")[0];
var output1 = document.getElementsByName("OUTPUT1")[0];

function changeInput(e){ 
    var calc = (((input1.value/20)*0.585)*0.30);
    output1.value = calc;
}

input1.onchange = changeInput;

edited Sep 07 '12 at 21:01

answered Sep 06 '12 at 19:28

Chase

29,019
1
49
48

I've spent a lot of time looking at jquery but it seems like I'm going to have to really spend some time to learn it before implementing. I would really like to get this to work in javascript. – user1635052 Sep 07 '12 at 20:19
Just saw your comment and updated my answer with a more javascript oriented answer without the use of jQuery. If this for some reason doesn't work correctly for you or you need more help then just let me know. Hope it helps =) ...And I highly recommend looking into jQuery when you get a chance. It is very sleek and powerful. – Chase Sep 07 '12 at 21:03

score 0 · Answer 3 · answered Sep 11 '12 at 11:48

Below code will build the needful automatic calculator.

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function calculate(ele)
{
    var result = ((ele / 20) * 0.585) * 0.30;
    document.getElementById("output1").value = result;
}
</script>

<style type="text/css">
body                    { font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:18px; margin:0; padding:0; }
.container              { background:#0CC; border:1px dotted #bbb; margin:40px auto 0 auto;  padding: 20px; width:500px; }
h1                      { font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; font-weight:bold; text-align:center; text-decoration:underline;  }
input                   { border:1px solid #eee; }
.container p label      { width:100px; float:left; }
p                       { clear:both; }
</style>
</head>
<body>

<form name="testing" method="post" action="">
<div class="container">
    <h1> My Calculator</h1>
    <p><label>Input : </label><input type="number" name="input1" value="" onBlur="calculate(this.value);"/></p>
    <p><label>Output : </label><input type="number" name="output1" id="output1"></p>
</div>
</form>


</body>
</html>

take user input from a Form perform calculation (order of operations) and output back into that form

3 Answers3

Linked