/    Sign up×
Community /Pin to ProfileBookmark

Passing Html form to JavaScript "undefined Error"

Copy linkTweet thisAlerts:
Sep 11.2013

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>
[/CODE]

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 ;
}
[/CODE]

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);
[/CODE]

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?

to post a comment
JavaScript

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@GettingSmartSep 11.2013 — 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?
Copy linkTweet thisAlerts:
@PadonakSep 12.2013 — if you need the result of init() not only once, as [B]GettingSmart[/B] 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

<i>
</i>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
Copy linkTweet thisAlerts:
@toshauthorSep 12.2013 — if you need the result of init() not only once, as [B]GettingSmart[/B] 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

<i>
</i>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[/QUOTE]

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..
Copy linkTweet thisAlerts:
@PadonakSep 14.2013 — sorry, [B][I]+[COLOR="#FF0000"]input[/COLOR]()+[/I][/B] was, of course a typo and [B][I]+[COLOR="#008000"]init[/COLOR]()+[/I][/B] had been meant instead - my bad.



yes, with the [B]return[/B] 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 [B]return[/B] in front is:



<i>
</i>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
×

Success!

Help @tosh spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 4.24,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...