I'm trying to display form results on the same page as the form but when I click my "Get Total" button I see the result appear briefly then disappear. My result is off too, I'm trying to add my variables together but I'm getting a join instead.

<form id="percentageBiz" method="post">
<input type="text" id="sum1">
<input type="text" id="sum2">
<input type="submit" onclick="total()" value="Get Total">

<div id="display" style="height: 50px; width: 100%;"></div>

<script>
function total(){
    var a = document.forms["percentageBiz"]["sum1"].value;
    var b = document.forms["percentageBiz"]["sum2"].value;
    //alert(a+b)
    var display=document.getElementById("display")
    display.innerHTML=a+b;
}
</script>

I'm trying to display form results on the same page as the form but when I click my "Get Total" button I see the result appear briefly then disappear. My result is off too, I'm trying to add my variables together but I'm getting a join instead.

<form id="percentageBiz" method="post">
<input type="text" id="sum1">
<input type="text" id="sum2">
<input type="submit" onclick="total()" value="Get Total">

<div id="display" style="height: 50px; width: 100%;"></div>

<script>
function total(){
    var a = document.forms["percentageBiz"]["sum1"].value;
    var b = document.forms["percentageBiz"]["sum2"].value;
    //alert(a+b)
    var display=document.getElementById("display")
    display.innerHTML=a+b;
}
</script>

• javascript

• Try parsing the variables a and b before adding them together String to Number convertion. And add a return false at the end, if I'm not mistaken this will prevent the submit from happening. – atomman Commented Jan 4, 2013 at 21:53

5 Answers 5

It's flashing because you're not doing anything to stop the form from submitting, and concatenating because you're not casting the values as numbers. Note you can use parseFloat if you're dealing with non-integers instead of parseInt as I used below.

Try this jsFiddle example.

function total(){
    var a = document.forms["percentageBiz"]["sum1"].value;
    var b = document.forms["percentageBiz"]["sum2"].value;
    //alert(a+b)
    var display=document.getElementById("display")
    display.innerHTML=parseInt(a,10)+parseInt(b,10);
    return false;
}​

and

<form id="percentageBiz" method="post">
<input type="text" id="sum1">
<input type="text" id="sum2">
<input type="submit" onclick="return total()" value="Get Total">
</form>
<div id="display" style="height: 50px; width: 100%;"></div>​

"the result appears briefly then disappears."

1. Try using input type="button" rather than input type="submit".
2. OR Else ( while using input type="submit" ) avoid form submission, by returning false in function total() and put onclick="return total( )".

You're trying to add two strings together. You should parse them into integers first: http://www.javascripter/faq/convert2.htm

    <form id="percentageBiz" method="post">
<input type="text" id="sum1">
<input type="text" id="sum2">
<input type="submit" onclick="total()" value="Get Total">

<div id="display" style="height: 50px; width: 100%;"></div>

<script>
function total(){
    var a = parseInt(document.forms["percentageBiz"]["sum1"].value);
    var b = parseInt(document.forms["percentageBiz"]["sum2"].value);
    //alert(a+b)
    var display=document.getElementById("display")
    display.innerHTML=a+b;
}
</script>

You shouldn't multiply them by 1 to cast, because that is parsing the string into an integer AND multiplying it by 1. So it's an extra step.

what's happening is your javascript code is working, but then submit is executing. All you need to do is switch type='submit' to type='button' and the reason you are getting the two numbers joining together is because it doesn't understand if it's a string or a number, so if you put display.innerHTML=parseInt(a + b); instead of display.innerHTML=a + b; it should solve your other problem.

You get a join instead of a sum because you always get String values.

You can multiply them by 1 for example, then you're var will be treaded as a number.