...

View Full Version : JS need help with the code using document.getElementById



09Harvey
06-19-2012, 04:49 PM
Hi guys,

I need your help with my simple problem

I want to add the value of textbox1 and textbox2 and then show the result using the "document.getElementById"

Here is my code:
------------------------------

<HTML>
<HEAD>
<TITLE></TITLE>

</HEAD>
<BODY>

<script language="javascript">
function Addnow(form)
{
var TextBox1 = form.textname1.value;
var TextBox2 = form.textname2.value;
form.textname3.value = eval(TextBox1) + eval(TextBox2);
}
</script>

<form>
<INPUT type = text name="textname1" onChange="Addnow(this.form);">
<INPUT type = text name="textname2" onChange="Addnow(this.form);">
<INPUT type = text name="textname3" READONLY>
</form>

</BODY>
</HTML>

WolfShade
06-19-2012, 06:44 PM
Are you concatenating strings? Or are you adding/subtracting integers?

Stay away from eval(). It is JavaScripts programming evil. Opens up all kinds of issues.

blaze4218
06-19-2012, 07:00 PM
In this case, eval didn't really do anything useful... except provide for a script injection...

<HTML>
<HEAD>
<TITLE></TITLE>

</HEAD>
<BODY>


<form name = "form1">
<INPUT type = "text" name="textname1" >
<INPUT type = "text" name="textname2" >
<INPUT type = "text" name="textname3" >
</form>

<script language="javascript">
function Addnow(form)
{
if (!(form1.textname1.value||form1.textname2.value)) {
form1.textname3.value = 'nada';
return false;
}
var TextBox1 = form1.textname1.value;
var TextBox2 = form1.textname2.value;
form1.textname3.value = TextBox1 + TextBox2; //opt1 for string concatenation
//form1.textname3.value = (Number(TextBox1)||0) + (Number(TextBox2)||0); //opt2 for numeric operations
}

form1.textname1.onblur = form1.textname2.onblur = Addnow;

</script>
</BODY>
</HTML>
Edit:
I like Philips idea for number validation (in option 2...)

Philip M
06-19-2012, 07:06 PM
Never use eval()!! <script language = "Javascript"> is long obsolete. Do not use upper-case for tags.

This provides validation that the user has entered numbers (which is what I assume you require). The result is dispalyed both in the textbox and a <span>.

It is a bad idea to assign your variables confusing names such as "TextBox1" which seems to refer to the box as opposed to its value.


<html>
<head>
<body>

<script type = "text/javascript">

function Addnow(form) {
var val1 = Number(form.textname1.value) || 0;
form.textname1.value = val1; // write it back to the field
if (val1==0) {form.textname1.value = ""} // erase zero or NaN entries
var val2 = Number(form.textname2.value) || 0;
form.textname2.value = val2;
if (val2==0) {form.textname2.value = ""}
form.textname3.value = val1 + val2;
document.getElementById("myspan").innerHTML = val1 + val2;
}

</script>

<form>
<input type = text name="textname1" onchange="Addnow(this.form);">
<input type = text name="textname2" onchange="Addnow(this.form);">
<input type = text name="textname3" readonly>
</form>
<span id = "myspan"></span>

</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum