CODEWITHSUNDEEP
javascriptxhtml
user1635052
user1635052

Reputation: 39

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

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>

Upvotes: 3

Views: 25665

Answers (3)

Aratidgr8
Aratidgr8

Reputation: 431

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>

Upvotes: 0

Chase
Chase

Reputation: 29569

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;

Upvotes: 1

BBog
BBog

Reputation: 3650

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>

Upvotes: 2

Related Questions