www.webdeveloper.com
Results 1 to 5 of 5

Thread: Passing Html form to JavaScript "undefined Error"

  1. #1
    Join Date
    Sep 2013
    Posts
    2

    Passing Html form to JavaScript "undefined Error"

    Hello All this is my first time posting to this form so I hope my question is clear and concise.

    I have a Html form :
    Code:
       <form action="" method="post"  id="form">
    		<input type="Text" name="userInput"  value=""> 
    	</form>
    The user will enter in a name of a item and this name will be passed to a function :
    Code:
    		function init(){
    		var input =	document.forms['form'].elements['userInput'].value ;
    		}
    Next I take the variable input and insert that into my sql statement which is suppose to query my data table and send back my bounds of the location of that item and zoom in.
    Code:
    setTimeout(function() {
                var sql = new cartodb.SQL({ user: 'jnmn11' });
                sql.getBounds("select * From stations where station_nm Like '" + input + "'").done(function(bounds) {
                  map.fitBounds(bounds)
                });
              }, 2000);
    If I hard code the name in my script functions as expected however when trying to get the input box to send the user input to my function I am getting a Undefined error within the Url being sent:
    sql?q=SELECT%20ST_XMin(ST_Extent(the…*%20From%20stations%20where%20station_nm%20Like%20'undefined')% 20as%20subq"

    I used this site to create my form input function and am not quite sure if I am missing something?

  2. #2
    Join Date
    Apr 2012
    Posts
    38
    The variable you set in the init function will not last as soon as the function stops.
    I'm not a guru on javascript but you need to find a way to set the variable outside of the function.
    Maybe you need to create the variable before starting the init function?

  3. #3
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    if you need the result of init() not only once, as GettingSmart already said, you must define the var outside the function to store the result of its work or make the function return the needed value

    Code:
    function init(){
    return document.forms['form'].elements['userInput'].value;
    }
    
    setTimeout(function() {
    bla-bla-bla
    sql.getBounds("select * From stations where station_nm Like '" + input() + "'").done(function(bounds) {
    bla-bla-bla}, 2000);
    the first variant is better because you can check if the user forgot to input the data
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  4. #4
    Join Date
    Sep 2013
    Posts
    2
    Quote Originally Posted by Padonak View Post
    if you need the result of init() not only once, as GettingSmart already said, you must define the var outside the function to store the result of its work or make the function return the needed value

    Code:
    function init(){
    return document.forms['form'].elements['userInput'].value;
    }
    
    setTimeout(function() {
    bla-bla-bla
    sql.getBounds("select * From stations where station_nm Like '" + input() + "'").done(function(bounds) {
    bla-bla-bla}, 2000);
    the first variant is better because you can check if the user forgot to input the data
    Ok this is where I need Clarification. I know how to access each element within the form and I am familiar with setting up the if statement to make sure that a value has been entered. However With the Return statement in front does that just return the userInput into the function int(....) brackets?Sorry I am a little confused on once the function runs where is the out put going and how to call it..

  5. #5
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    sorry, +input()+ was, of course a typo and +init()+ had been meant instead - my bad.

    yes, with the return in front this just returns the input value into another function. from the other hand, if you store the value in a variable outside your functions you can use it not only once because this value will be stored there until page reloads or another value is stored.

    the good example of using return in front is:

    Code:
    function doc(id){return document.getElementById(id);}
    this makes your code easier for writing and further reading. i'm not very good in explanations in english
    Last edited by Padonak; 09-14-2013 at 07:56 AM.
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles