Using Javascript/JQuery and getting undefined var when the page loads

Question

I have this Javascript/JQuery code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript">

    name = $("#name").val();

    alert("Name: " + name);

</script>

And this HTML:

<form name="report" action="send.php" method="post">

    <input type="text" name="name" id="name" value="Senna" />
    <input type="submit" value="Send" />

</form>

When the page loads i get "Name: undefined" instead of "Name: Senna".

Can someone help me to get the expected result?

Well... you make this mistake only once... better to get it out the way... — Lix
– Lix, Commented Jul 3, 2012 at 21:58
@Lix, You're right, as i am in my first steps with JQuery, this mistake i certainly won't make anymore — Marcio Mazzucato
– Marcio Mazzucato, Commented Jul 3, 2012 at 22:02
It really is the key to allowing you to get going with jQuery - good luck, happy coding and have fun! — Lix
– Lix, Commented Jul 3, 2012 at 22:03

Robert · Accepted Answer · 2012-07-03 21:57:29Z

2

While JavaScript provides the load event for executing code when a page is rendered, this event does not get triggered until all assets such as images have been completely received. In most cases, the script can be run as soon as the DOM hierarchy has been fully constructed. The handler passed to .ready() is guaranteed to be executed after the DOM is ready, so this is usually the best place to attach all other event handlers and run other jQuery code.

You need to indicate to execute the function once the page has been loaded. Currently you are only defining it and not decalring when to execute it.

$(document).ready(function(){
    name = $('#name').val();
    alert('Name: ' + name);
});

Or:

$(function(){
    name = $('#name').val();
    alert('Name: ' + name);
});

answered Jul 3, 2012 at 21:57

Robert

8,7672 gold badges29 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Marcio Mazzucato Over a year ago

Very objetive your explanation! Thanks for the attention and patience!

Robert Over a year ago

Glad I could assist. I've learned over the years that providing the appropriate amount of details is very helpful in determining any solution. After all, it's hard to solve a problem if you don't understand what is happening.

VisioN · Accepted Answer · 2012-07-03 22:01:44Z

2

You should place your code inside the DOM ready handler:

$(function() {
    var name = $("#name").val();
    alert("Name: " + name);
});

Otherwise you are trying the work with elements which are not yet loaded.

edited Jul 3, 2012 at 22:01

answered Jul 3, 2012 at 21:55

VisioN

146k35 gold badges287 silver badges291 bronze badges

Comments

Lix · Accepted Answer · 2012-07-03 22:10:31Z

1

You need the document.ready callback.

Place your code inside a function like this -

$(function(){
  // code goes here
});

You need to use this callback to know when jQuery and the entire DOM is loaded. Only then can you start to manipulate the Markup and CSS with your jQuery code.

The code above is really just shorthand for this -

$(document).ready(function(){
  // code goes here
});

This uses the .ready() method - http://api.jquery.com/ready/
An extract from the description of the .ready() function -

... The handler passed to .ready() is guaranteed to be executed after the DOM is ready, so this is usually the best place to attach all other event handlers and run other jQuery code. ...

_{emphasis added}

edited Jul 3, 2012 at 22:10

answered Jul 3, 2012 at 21:56

Lix

48.2k12 gold badges107 silver badges134 bronze badges

Collectives™ on Stack Overflow

Using Javascript/JQuery and getting undefined var when the page loads

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related