Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Jan 2011
    Posts
    66
    Thanks
    10
    Thanked 5 Times in 5 Posts

    Passing Variables into a function from a form

    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:

    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:

    Code:
    //Is it a number
    
    	function isNumeric(elem, helperMsg){
    	var numericExpression = /^[0-9]+$/;
    	if(elem.value.match(numericExpression)){
    		return true;
    	}else{
    		alert(helperMsg);
    		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!
    Last edited by Jimather; 01-03-2011 at 06:48 PM.

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,893
    Thanks
    202
    Thanked 2,528 Times in 2,506 Posts
    Code:
    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.

  • Users who have thanked Philip M for this post:

    Jimather (01-03-2011)

  • #3
    New Coder
    Join Date
    Jan 2011
    Posts
    66
    Thanks
    10
    Thanked 5 Times in 5 Posts
    Excellent, thankyou.

    I can now proceed with quietly kicking myself.

  • #4
    New Coder
    Join Date
    Jan 2011
    Posts
    66
    Thanks
    10
    Thanked 5 Times in 5 Posts
    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.
    Last edited by Jimather; 01-03-2011 at 06:48 PM.

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,893
    Thanks
    202
    Thanked 2,528 Times in 2,506 Posts
    All Javascript variables are strings unless converted to numbers using one of a number of possible methods.
    So "2" + "3" = "23". (strings concatenate)

    Code:
    var Xcoord = Number(document.getElementById('X').value);
    var Ycoord = Number(document.getElementById('Y').value);
    Last edited by Philip M; 01-03-2011 at 06:48 PM.

  • Users who have thanked Philip M for this post:

    Jimather (01-03-2011)

  • #6
    New Coder
    Join Date
    Jan 2011
    Posts
    66
    Thanks
    10
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by Philip M View Post
    All Javascript variables are strings unless converted to numbers using one of a number of possible methods.
    So "2" + "3" = "23". (strings concatenate)

    Code:
    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:

    Code:
       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.

  • #7
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,893
    Thanks
    202
    Thanked 2,528 Times in 2,506 Posts
    Code:
    <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>

  • #8
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Quote Originally Posted by Philip M View Post
    All Javascript variables are strings unless converted to numbers using one of a number of possible methods.
    Form element values.
    Last edited by Logic Ali; 01-03-2011 at 08:56 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •