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

Question

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>

A quick fiddle for you.

user13500
– user13500

2014-02-22 15:22:43 +00:00
Commented Feb 22, 2014 at 15:22 — user13500
– user13500, Commented Feb 22, 2014 at 15:22

Asons · Accepted Answer · 2014-02-22 16:02:32Z

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/

jing3142 · Accepted Answer · 2014-02-22 15:14:10Z

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.

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related