SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    372
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Another 'this' question !

    Another 'this' question !

    Hi all

    Sorry folks it's another 'this' question, I am looking for answers but I'm stuck again.

    http://www.ttmt.org.uk/this/

    I have a group of drop down list that all call a function. In the function I just want to capture
    the value that has been selected.

    I'm always getting the first value because I need to capture 'this' value.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    
    	<title>untitled</title>
    	
    	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    	
    	<style type="text/css">
    	 *{
    	   margin:0;
    	   padding:0;
    	 }
    	 #wrap{
    	   margin:50px;
    	 }
    	</style>
    </head>
    
    <body>
      <div id="wrap">
        <form method="" action="">
          <select class="list" onchange="getList();">
            <option value="One">One</option>
            <option value="Two">Two</option>
            <option value="Two">Three</option>
            <option value="Two">Four</option>
          </select>
          <select class="list" onchange="getList();">
            <option value="Two-One">Two-One</option>
            <option value="Two-Two">Two-Two</option>
            <option value="Two-Two">Two-Three</option>
            <option value="Two-Two">Two-Four</option>
          </select>
          <select class="list" onchange="getList();">
            <option value="Three-One">Three-One</option>
            <option value="Three-Two">Three-Two</option>
            <option value="Three-Two">Three-Three</option>
            <option value="Three-Two">Three-Four</option>
          </select>
        </form>  
      </div>
      
      <script type="text/javascript">
      
        function getList(){
          //alert($(this, '.list').val());
          
          alert($('.list').val());
        }
        
      </script>
      
    </body>
    </html>

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,718
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    It's the inline HTML events that are getting in your way here.

    Code:
    <select class="list" onchange="getList();">
    ...
    <select class="list" onchange="getList();">
    ...
    <select class="list" onchange="getList();">
    Code javascript:
    $('select.list').change(function () {
        alert(this.value);
    });

    Keep your scripting out of the HTML content code, and you will be fine.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Addict
    Join Date
    Dec 2005
    Posts
    336
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    pass 'this' in each of the function calls, then change your function to this (no pun intended):
    Code JavaScript:
    function getList(el){
      console.log($(el).val());
    }

    Or you can drop the inline onchange in the html and do this:
    Code JavaScript:
    $('.list').on('change', function() {
    	console.log($(this).val());
    });

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,718
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by centered effect View Post
    Or you can drop the inline onchange in the html and do this:
    Code JavaScript:
    $('.list').on('change', function() {
    	console.log($(this).val());
    });
    Is there a benefit to using $(this).val() over this.value ?

    What possible benefit can using the jQuery accessors provide in this situation?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Addict
    Join Date
    Dec 2005
    Posts
    336
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    If I was using vanilla JS, then I would use this.value, but in using jQuery, I would use the jQuery way $(this).val() so I can use jQuery methods if I needed to.

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,718
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by centered effect View Post
    If I was using vanilla JS, then I would use this.value, but in using jQuery, I would use the jQuery way $(this).val() so I can use jQuery methods if I needed to.
    The purpose of using jQuery is to serve as a concise library that simplifies things. I don't see how $(this).val() is a simplification of this.value
    Just because a technique for it exists, doesn't mean that the technique is better or should be used.

    Having said that though, there are times when $(...).val() is appropriate, but given that the this keyword is already available not as a jQuery object, it seems needless to convert the this keyword in to a jQuery object so that you can then retrieve the jQuery val() property to obtain the value of the jQuery object that used to be the this keyword.

    Using this.value avoids all of those details, with no negative consequences.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Addict
    Join Date
    Dec 2005
    Posts
    336
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I don't disagree with you, and to be honest, I have to digress the answer because I was more answering for $(this) and not $(this).val() per say.

  8. #8
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    372
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks paul_wilkins, that makes more sense now.

    So should I always keep scripting out of the HTML?

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,718
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by ttmt View Post
    Thanks paul_wilkins, that makes more sense now.

    So should I always keep scripting out of the HTML?
    Your HTML content should be kept as free as possible from having CSS or JavaScript mixed in with it.
    So that's a yes.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

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