Problems with passing integer variables from HTML form to a function

Dev Shed Forums Sponsor:

January 4th, 2008, 05:56 AM

acidedge2004

Contributing User

Join Date: Jan 2008

Posts: 139

Time spent in forums: 1 Day 4 h 32 m 12 sec
Reputation Power: 6

Problems with passing integer variables from HTML form to a function

Hi, I have started learning javascript yesterday and so got the basics down. But I wanted to get a bit more complicated today, using variable passing with alert boxes etc. So, I wrote the script to pass set variables from one script to another after a button was clicked, and then display it in an alert box.

Well, now I want to make it so the user can choose the variables themselves. So I created a simple HTML form with two input boxes, which was then supposed to be sent to the functions to be multiplied and displayed in the alert box.

Here is what I had:

Code:

<html>
<head>

<script type="text/javascript">
	function func_math(x,y)
	{
	return x*y;
	}
</script>

<script type="text/javascript">
	function func_alert()
	{
	alert("The number is " + func_math(2,3));
	}
</script>


</head>
<body>

<input type="button" onclick="func_alert()" value="click">

</body>
</html>

So this work perfectly, no problems what so ever. But, now I tried to use a HTML form to allow users to choose the variables, which is easy if I wanted to POST to another page, but I do not, I just want the alert box to display. I have gone through many different versions and used different approaches, tried to use resources but found nothing that helped They had passing variables, even to alert boxes, but they were just text so did not have to be manipulated first.

this is what I have now,

Code:

<html>
<head>

<script type="text/javascript">
	function func_math(x,y)
	{
	return z=x*y;
	}
</script>

<script type="text/javascript">
	function func_alert()
	{
	alert("The number is " + func_math(z));
	}
</script>


</head>
<body>

<form name="numform" >
x:
<input type="integer" name="x" value="x">
y:
<input type="integer" name="y" value="y">
<input type="submit" value="click" onsubmit="func_alert(x,y)">
</form>


</body>
</html>

Now, the html form displays no probs, but clicking submit just leads to the page being reloaded and no display box appears or even error messages. Can any one give me a hand or point me in the right direction?

Thanks for any help received, Mike

January 4th, 2008, 09:19 AM

lokisapocalypse

Contributing User

Join Date: Apr 2005

Posts: 623

Time spent in forums: 5 Days 22 h 58 m 20 sec
Reputation Power: 144

I would just change <input type="submit"... to <input type="button"...

January 4th, 2008, 09:23 AM

RyanT

Contributing User

Join Date: Sep 2006

Posts: 71

Time spent in forums: 2 Days 2 h 3 m 32 sec
Reputation Power: 13

Code:

<script type="text/javascript">
	function func_math()
	{
	var z=document.numform.x.value*document.numform.y.value;

	alert("The number is " + z);
	}
</script>


</head>
<body>

<form name="numform" >
x:
<input type="text" name="x">
y:
<input type="text" name="y">
<input type="button" value="click" onclick="func_math()">

</form>

January 4th, 2008, 09:27 AM

acidedge2004

Contributing User

Join Date: Jan 2008

Posts: 139

Time spent in forums: 1 Day 4 h 32 m 12 sec
Reputation Power: 6

Thanks. I found a solution to my problem on another site, but that was about the same length, and as complicated, as what I had originally. Yours is much much simpler, so will learn to do it that way instead. Thanks for your help, Mike

Problems with passing integer variables from HTML form to a function

Developer Shed Advertisers and Affiliates