Another 'this' question !

**ttmt** · Jan 13, 2012 13:18

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>

**paul_wilkins** · Jan 13, 2012 16:50

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.

**centered effect** · Jan 13, 2012 16:53

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());
});

**paul_wilkins** · Jan 13, 2012 16:57

Originally Posted by centered effect

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?

**centered effect** · Jan 13, 2012 17:04

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.

**paul_wilkins** · Jan 13, 2012 17:32

Originally Posted by centered effect

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.

**centered effect** · Jan 13, 2012 17:49

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.

**ttmt** · Jan 14, 2012 05:44

Thanks paul_wilkins, that makes more sense now.

So should I always keep scripting out of the HTML?

**paul_wilkins** · Jan 14, 2012 05:48

Originally Posted by ttmt

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.

User Tag List

Thread: Another 'this' question !

Thread Tools

Display

Another 'this' question !

Bookmarks

Bookmarks

Posting Permissions