[jQuery] Re: change()

In an event callback function such as the one that's called from .change(),
'this' is not a jQuery object. It is a simple DOM element. You need to wrap
it in $() to get a jQuery object if you want to use jQuery methods. Or, you
can use DOM properties directly.

I would also suggest using a $ prefix on a variable that represents a jQuery
object. It's a good visual reminder that you can use jQuery methods on that
variable.

Also, when using an ID selector, it generally isn't necessary to include the
tagname, and in fact the code will be faster if you omit it.

For example:

$(document).ready( function() {
var $select = $('#campaign_type_select');
alert( $select.val() );
$select.change( function() {
alert( $(this).val() );
});
});

Of course, in this particular case, since you already have the select
element wrapped in a jQuery object, $select and $(this) (inside the change
function) are the same thing, so you could also do:

$(document).ready( function() {
var $select = $('#campaign_type_select');
alert( $select.val() );
$select.change( function() {
alert( $select.val() );
});
});

BTW, I highly recommend triggering on both the change event and the keydown
event. This gives better usability when someone uses the keyboard:

$(document).ready( function() {
var $select = $('#campaign_type_select');
alert( $select.val() );
$select.bind( 'change keydown', function() {
alert( $(this).val() );
});
});

The only thing to watch out for there is that you want to know if the value
has actually changed on the keydown or not. This would take care of that:

$(document).ready( function() {
var $select = $('#campaign_type_select');
var value = $select.val();
alert( value );
$select.bind( 'change keydown', function() {
var newvalue = $(this).val();
if( newvalue != value ) {
value = newvalue;
alert( value );
}
});
});

-Mike

> From: Bob O
>
> Hello all,
> a little new the js and jquery any help would be fantastic...
>
> I have this in my linked myFx.js file:
>
> $(document).ready(function() {
> var selected_type = $('select#campaign_type_select');
> var coupon_div = $('#campaign_create_coupon');
> var broadcast_div = $('#campaign_create_broadcast');
> var contest_div = $('#campaign_create_contest');
>
> // alert(selected_type.val()); << I CAN GET THIS TO FIRE
> WHEN UNCOMMENTED, and it returns the the value coupon as i
> would expect.
>
> BUT THIS ISNT WORKING ive tried various renditions
> (this.val(), selected_type, etc...) based on what i have read
> on this site and the jQuery site with 0 success.
>
> selected_type.change(function() {
> if (this.val() == 'contest') {
> alert('contest');
> }
> else if (this.val() == 'broadcast') {
> alert('broadcast');
> }
> else (this.val() == 'coupon') {
> alert('coupon');
> }
> });
> });
>
> This is the HTML:
> <div class="form_data_wrap">
> <div class="form_data_label">Campaign Type:</div>
> <div class="form_data_value">
> <select id="campaign_type_select">
> <option value="coupon">Coupon</option>
> <option value="broadcast">Broadcast</option>
> <option value="contest">Contest</option>
> </select>
> </div>
> </div>
>
> Someone point me in the right direction.....\m/>.<\m/
>