CODEWITHSUNDEEP
javascripthtml
dexterous
dexterous

Reputation: 6526

how to write a result in a text box in html computed by the java script?

I am new to HTML and Javascript. I am trying to experiment on invoking C++ method from Javascript using QT. However, this question is not related to QT. I have a form with two number inputs. I want to add a third box where the results will be displayed. How can I do so? here is my html file. I don't want all the items to be gone. I want the user to see the multilicant A, mulitplicant B, and the result to be displayed in third text box the form. Also, a reset button to reset the form. 

<html>
<head>
<script>


function Multiply()
{
   var result = myoperations.sumOfNumbers(document.forms["DEMO_FORM"]["Multiplicant_A"].value, document.forms["DEMO_FORM"]["Multiplicant_B"].value);
   document.write(result);

}

</script>
</head>

<body>
<form name="DEMO_FORM">
Multiplicant A: <input type="number" name="Multiplicant_A"><br>
Multiplicant B: <input type="number" name="Multiplicant_B"><br>
<input type="button" value="Multiplication_compute_on_C++" onclick="Multiply()">
</form>
</body>
</html>

Upvotes: 0

Views: 3632

Answers (2)

Asons
Asons

Reputation: 87191

This is a way to start:

Demo: http://jsfiddle.net/Q3YV9/

<html>
<head>
<script>


function Multiply()
{
   var res = parseFloat(document.getElementById("anr").value) * parseFloat(document.getElementById("bnr").value) 
    document.getElementById("cnr").value = res;

}

</script>
</head>

<body>
<form name="DEMO_FORM">
Multiplicant A: <input type="number" id="anr" name="Multiplicant_A"><br>
Multiplicant B: <input type="number" id="bnr" name="Multiplicant_B"><br>
Result C: <input type="number" id="cnr" name="Multiplicant_C"><br>
<input type="button" value="Multiplication_compute_on_C++" onclick="Multiply()">
</form>
</body>
</html>

If you don't want the result box predefined, use document.createElement('input') to add it to the DOM.

Sample:

function Multiply()
{
   var res = parseFloat(document.getElementById("anr").value) * parseFloat(document.getElementById("bnr").value) 

    //document.getElementById("cnr").value = res;

    var newinput = document.createElement('input');
    newinput.setAttribute('value', res);
    document.forms["DEMO_FORM"].appendChild(newinput);
}

And this demo shows how to add the input result anywhere in the document: http://jsfiddle.net/Q3YV9/3/

Upvotes: 1

jing3142
jing3142

Reputation: 1871

Simplest is to put in an answer box using a div tag 

<html>
<head>
<script>


function Multiply()
{
   var result = myoperations.sumOfNumbers(document.forms["DEMO_FORM"]["Multiplicant_A"].value, document.forms["DEMO_FORM"]["Multiplicant_B"].value);
   document.getElementById('answerbox').innerHTML=result;

}

</script>
</head>

<body>
<form name="DEMO_FORM">
Multiplicant A: <input type="number" name="Multiplicant_A"><br>
Multiplicant B: <input type="number" name="Multiplicant_B"><br>
<input type="button" value="Multiplication_compute_on_C++" onclick="Multiply()">
</form>
<div id='answerbox'><div>
</body>
</html>

By the way type="number" is new in HTML5 for previous versions use type="text" and then do a parseInt on the value for an integer and parseFloat on the value for a decimal number.

Upvotes: 0

Related Questions