validation for html form adding 2 numbers

javascript validation

Page 1 of 1

3 Replies - 7653 Views - Last Post: 26 May 2009 - 12:57 PM

#1 dafforose  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 26-May 09

validation for html form adding 2 numbers

Posted 26 May 2009 - 09:06 AM

Hi Experts,

I am trying to create an html form for adding 2 numbers and also trying to validate using java script. what I want is instead of getting an alert msg as a result

I want the result to be displayed in the sum:text box --- not as an alert
I want to validate the input fields ,if null -- throw an alert msg

Can anyone help me withthis code plz

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Addition</title>
<script type="text/javascript">
function do_addition()
{
	var value1,value2,sum;
	 if(document.form1.first.value=="" || document.form1.first.value==null){
		 alert("Enter number to calculate"");
	 }
	 else if(document.form1.second.value=="" || document.form1.second.value==null){
		alert("Enter number to calculate"");
	 }
	 value1 = parseInt(document.form1.first.value);
	 value2 = parseInt(document.form1.second.value);
	 sum = (value1+value2);
	 alert("The sum of " + value1 + " and "  +  value2 + " is " + sum + ".");
			  
		   
}
</script>
</head>
<body>
	<form method="post" name="form1" onsubmit="return do_addition(this);">
	Enter 1st Number:
	<input type="text" name="first" size="20"/>
	<br />
	Enter 2nd Number:
	<input type="text" name="second" size="20"/>
	<br>
				Sum:<input type="text" name="second" size="20"/>

	<br>
	<input type="submit" name="submit" value="Add" />
	<br>
	<br>
	<input type="Reset" value="Clear">
	<br>
	</form>

</body>
</html>


Mod Edit: Please use code tags when posting your code. Code tags are used like so => :code:

Thanks,
PsychoCoder :)

Is This A Good Question/Topic? 0
  • +

Replies To: validation for html form adding 2 numbers

#2 William_Wilson  Icon User is offline

  • lost in compilation
  • member icon

Reputation: 199
  • View blog
  • Posts: 4,807
  • Joined: 23-December 05

Re: validation for html form adding 2 numbers

Posted 26 May 2009 - 09:33 AM

You need to rename this input field:
Sum:<input type="text" name="second" size="20"/>
it's name is the same as another input field. Perhaps something like:
Sum:<input type="text" name="sum" size="20"/>

This would allow you to update it's value with:
document.form1.sum.value = sum;

I assume you never want the page to reload on this form, so I would make your onsubmit:
onsubmit="do_addition();return false;"

You do not need the "this" portion of your call since you do not take a parameter in your function. If you want to use it, you need to accept it.
Was This Post Helpful? 0
  • +
  • -

#3 dafforose  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 26-May 09

Re: validation for html form adding 2 numbers

Posted 26 May 2009 - 10:04 AM

View PostWilliam_Wilson, on 26 May, 2009 - 08:33 AM, said:

You need to rename this input field:
Sum:<input type="text" name="second" size="20"/>
it's name is the same as another input field. Perhaps something like:
Sum:<input type="text" name="sum" size="20"/>

This would allow you to update it's value with:
document.form1.sum.value = sum;

I assume you never want the page to reload on this form, so I would make your onsubmit:
onsubmit="do_addition();return false;"

You do not need the "this" portion of your call since you do not take a parameter in your function. If you want to use it, you need to accept it.


Thanks for the reply Willam,

but I didn't get you. Where exactly I need to add "document.form1.sum.value = sum;" to get the result in sum box instead of an alert. how about the validation its not working.

thanks
DR
Was This Post Helpful? 0
  • +
  • -

#4 crazyjugglerdrummer  Icon User is offline

  • GAME OVER. NERD WINS.
  • member icon

Reputation: 116
  • View blog
  • Posts: 690
  • Joined: 07-January 09

Re: validation for html form adding 2 numbers

Posted 26 May 2009 - 12:57 PM

add it right where you had your alert code. For the validation you could do a simple check to see if the parseInt method worked, which would be my reccomendation. You might just be able to check with

value1 = parseInt(document.form1.first.value);
	 value2 = parseInt(document.form1.second.value);
	  if (value1 == NaN)
			 alert("parse to int failed, please check number");
	 sum = (value1+value2);
	document.form1.sum.value = sum;
			  
		  
}

and do likewise with value2, adding code to make sure that you only add the values if both arguments aren't NaN. ;D
Was This Post Helpful? 1
  • +
  • -
Page 1 of 1