www.webdeveloper.com
Results 1 to 7 of 7

Thread: [RESOLVED] Strange issue with selecting text input

  1. #1
    Join Date
    Dec 2008
    Posts
    488

    resolved [RESOLVED] Strange issue with selecting text input

    I'm trying to get the value of a text input to use as a url, but for some reason, jQuery is not finding the input and assigning an it to an object. When I try to use the selector for ID and get it's value:
    Code:
    alert($('#foo').value);
    I just get "undefined". Actually, if I try to get any attribute of the tag, I get undefined. Even if I use "name" instead of "id".

    Any clue why? I've used jQuery before, so selectors are nothing new to me... but I've never needed to use it with a text input maybe I'm missing something critical in the XHTML? I don't know... anyway, here's an XHTML page that causes the example error:

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <script type="text/javascript" src="assets/scripts/jquery-min.js"></script>
    </head>
    
    <body>
    <input type="text" name="foo" value="blah blah blah" /><input type="button" value="try it" onclick="alert($('#foo').value)" />
    </body>
    </html>
    Why is jQuery not finding the tag?

    Forgot to mention:: jQuery v1.3.2
    Last edited by jamesbcox1980; 12-14-2009 at 06:48 PM.

  2. #2
    Join Date
    Mar 2007
    Posts
    946
    I don't see anywhere in your code that says id="foo".

  3. #3
    Join Date
    Dec 2008
    Posts
    488
    id="foo", name="foo" are supposed to both work with $('#foo'). Nevertheless, if you change it to id instead of name, you get the same problem.

  4. #4
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    Quote Originally Posted by jamesbcox1980 View Post
    I'm trying to get the value of a text input to use as a url, but for some reason, jQuery is not finding the input and assigning an it to an object. When I try to use the selector for ID and get it's value:
    Code:
    alert($('#foo').value);
    Why is jQuery not finding the tag?

    Forgot to mention:: jQuery v1.3.2
    it is probably finding the tag, but jQuery objects (what's returned from $) don't have a .value property.

    jQuery result set can reach the actual tag as integer properties of the set.

    since you're only getting one element, you can pluck the first result from the jQuery object like you would get the first element of an array:

    Code:
    alert($('#foo')[0].value);

  5. #5
    Join Date
    Dec 2008
    Posts
    488
    I played around a little, and as it turns out, you have to use the jQuery attributes. jQuery assigns the inputs into an HTML collections and gives several "attributes" which are actually methods to the collection. I tried $('#foo')[0].value and returned the value ok... but that's not right... I've always used just the single match. But i've never tried to get the value or any real HTML attributes before, so I never had to learn this. So I just changed it to the jQuery attribute val()

    Code:
    alert($('#foo').val());
    But you have to be careful with this, because jQuery will pull all matches with the name "foo" and combine their values for a single output. Same with class.

  6. #6
    Join Date
    Mar 2007
    Posts
    946
    Quote Originally Posted by jamesbcox1980 View Post
    id="foo", name="foo" are supposed to both work with $('#foo'). Nevertheless, if you change it to id instead of name, you get the same problem.
    Change your alert statement to

    PHP Code:
    alert($('#foo').val()) 

  7. #7
    Join Date
    Dec 2008
    Posts
    488
    Oh, thanks rnd_me and skywalker.... I had just figured it out.

Thread Information

Users Browsing this Thread

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

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