PDA

View Full Version : Passing Variables into a function from a form

Jimather
01-03-2011, 05:44 PM
Hi, I am quite new to javascript but I'm quite sure this problem is very easy to solve.

I have a vague idea of what might be going wrong but I have no idea what I should be doing instead. Here is what I'm trying to do:

User inputs X and Y coordinates into form
validate that they are numbers
do a little bit of maths
redirect to a php script with a single variable tacked onto the end of the url

Here is the form code:

//part of a larger php script to make the form

echo "<form name='gotoForm' onsubmit='return coordCalc()'>

<fieldset>
<legend>Go to Square</legend>
X <input type='text' id='X' size='1' maxlength='3'/>
Y <input type='text' id='Y' size='1' maxlength='3'/>
<input type='submit'

value='Go To' />
</fieldset>
</form> ";

which references these functions in the header:

//Is it a number

function isNumeric(elem, helperMsg){
var numericExpression = /^[0-9]+\$/;
if(elem.value.match(numericExpression)){
return true;
}else{
elem.focus();
return false;
}
}

//deal with the input, check if they are both numbers with the above function
//if they are do some maths on the input
//add the result onto a url and redirect

function coordCalc (){

var Xcoord = document.getElementById('X');
var Ycoord = document.getElementById('Y');

if(isNumeric(Xcoord, "Please enter a Number for X")){
if(isNumeric(Ycoord, "Please enter a Number for Y")){

//Takes the X and Y coordinates and transforms them into a single number
//not fully coded in case you try putting some numbers into the formula btw :)

var X = parseInt(document.getElementById('X').value);
var Y = parseInt(document.getElementById('Y').value);

var G = 16;
var Z = (((G + 1) - Y) - Y);
var A = (Y + Z);
var B = (X - 1);
var L = ((A * (G - 1)) + B);

window.location = "map.php?start=" + L;

}
}
return false;

}

The number validation works but the url ends up as map.php?start=NaN.

Now, this simply must be the way I am assigning the Xcoord and Ycoord variables with the document.getElementByID() function I am sure.

But like I said, I have no idea what to do instead, any help is massively appreciated.

Thankyou!

Philip M
01-03-2011, 05:50 PM
var Xcoord = document.getElementById('X').value;
var Ycoord = document.getElementById('Y').value;

All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

Jimather
01-03-2011, 05:56 PM
Excellent, thankyou.

I can now proceed with quietly kicking myself.

Jimather
01-03-2011, 06:35 PM
Aaargh now my variables are concatenating not adding, even when I use the += operator. Its fine when I do A + 1, but A + B concatenates.

Sorry, just thought about this and its obviously because the input is being treated as a text string that passes the validity test cos its all numbers but still concatenates when you add it to a variable.

**** you javascript i'm gonna get this.

I have added a parseInt to the code.

Philip M
01-03-2011, 06:44 PM
All Javascript variables are strings unless converted to numbers using one of a number of possible methods.
So "2" + "3" = "23". (strings concatenate)

var Xcoord = Number(document.getElementById('X').value);
var Ycoord = Number(document.getElementById('Y').value);

Jimather
01-03-2011, 07:14 PM
All Javascript variables are strings unless converted to numbers using one of a number of possible methods.
So "2" + "3" = "23". (strings concatenate)

var Xcoord = Number(document.getElementById('X').value);
var Ycoord = Number(document.getElementById('Y').value);

Once again thankyou, I just look at code tutorials that show things like this:

var a = 4;
var b = 6;
var c = 10;
var d = 3;

var e = a + b + c;
(e = 20)

and think, where the hell am I going wrong.

Anyway, I think I have used my noob question quota for the day and will bravely attempt to solve any further issues myself. :thumbsup:

Philip M
01-03-2011, 08:38 PM
<script type = "text/javascript">
var a = 4; // a number
var b = 6;
var c = 10;
var e = a + b + c;
alert ("e = " + e) // 20

var f = "4"; // a string value
var g = "6";
var h = "10";
var k = f + g + h;
alert ("k = " + k); // 4610

</script>

Logic Ali
01-03-2011, 08:54 PM
All Javascript variables are strings unless converted to numbers using one of a number of possible methods.
Form element values.