Develop Reference

Which selector will be used when $(this) is called from an event with multiple elements?

I have multiple selectors in a function with onclick event. And I want to update a global variable based on whichever one is clicked.
var sort = '';
$('#firstName, #lastName, #age, #yearLevel, #gender, #event, #year').onclick(function () {
sort = $(this).attr('id');
});
Will the $(this) use the value of the id which was clicked or all of them?
Question 2:
The ids are for <a>, can I use value attribute in <a>, instead of just getting the id name?

Use click instead of onclick.
var sort = '';
$('#firstName, #lastName, #age, #yearLevel, #gender, #event, #year').click(function ()
{
sort = $(this).attr('id');
});
See Plunker: http://plnkr.co/edit/4mEvS5UE7smOpMFw?open=lib%2Fscript.js

Select element by passing variable in function - jQuery

I am trying to select all input fields inside a certain element. I pass this element to a function, but I don't know how to go from there:
$('._save, .btn-success').click(function(){
saveForm($('.dashboard_container'));
});
//This functions has to select all the input fields inside the given element
function saveForm(that) {
var input = $(that, 'input'); //This does not seem to work
input.each(function(){
//Do something
})
}
How to chain a variable and a selector together?

The contextual selector takes the parameters the other way around to what you've used:
function saveForm($that) {
var $input = $('input', $that);
$input.each(function(){
//Do something
})
}
You could also use the find() method as you're passing in a jQuery object:
var $input = $that.find('input');

If you need to find all input field inside some element x then you can use .find(input).
For example:
//This functions has to select all the input fields inside the given element
function saveForm(that) {
var input = $(that).find("input"); //This does not seem to work
input.each(function(){
//Do something
})
}
And you can achieve it without using .find as well (the way you were trying to do)
$('._save, .btn-success').click(function(){
saveForm('.dashboard_container');
});
//This functions has to select all the input fields inside the given element
function saveForm(that) {
var input = $(that + ' input'); //This does not seem to work
input.each(function(){
//Do something
})
}

add onchange to <select>

I want to add an onchange function to my created select, but it didn't work. Does someone know how you add onchange to a select? This is my code:
function maandgen(){
var ma = document.createElement("select");
ma.id='kies';
ma.onchange='change';

You need to assign a function to onchange property of newly created element.
and Add that to document as well
function maandgen(){
var ma = document.createElement("select");
ma.id='kies';
ma.onchange= changefunction;
document.appendChild(ma);
}
function changefunction(){
alert("changed");
}
i want to use the value of my option in my function howe can i to
that?
if you want to pass an argument or "this" to function you can do
replace
ma.onchange= changefunction;
with
ma.setAttribute('onchange', 'changefunction(this)');
and now change function becomes
function changefunction(item) {
var value = item.value;
}

try this
function maandgen(){
var ma = document.createElement("select");
ma.id='kies';
ma.onchange= function() {/* write your action here */};
};

onchange event is fired on button click and not on dynamically created select element

I use this on dynamically created select but the function is not being called
select.onchange = function(select) {getdetails();};
I use this way, and the function is being called from a static button's click (I also try not appending the select to its DIV container)
select.addEventListener('change', getdetails());
Please help thanks.

Here is working code doing what you described: Live demo here (click).
var select = document.createElement('select');
var option = document.createElement('option');
option.textContent = 'Option 1';
var option2 = document.createElement('option');
option2.textContent = 'Option 2';
select.appendChild(option);
select.appendChild(option2);
select.addEventListener('change', getDetails);
document.body.appendChild(select);
function getDetails(e) {
console.log('Running!');
}
Update according to your comments - passing parameters to event listener:
select.addEventListener('change', function() {
getDetails(some, params, here);
});
You can't call the function directly and pass in parameter like you were trying to do here select.addEventListener('change', getdetails());. Consider this example:
function getdetails() {
return 'a';
}
select.addEventListener('change', getdetails());
in the above code, the returned value of getdetails() is passed as the callback, so this is the same result: select.addEventListener('change', 'a'); See why your function wasn't called?
Also, this method is outdated:
select.onchange = function(event) {
console.log(event);
};
Use addEventListener instead. If you do use it, note that it accepts the "event" object. You can't just pass in whatever you want. If you needed to pass something in, then call another function there and pass in what you need, like this:
select.onchange = function(event) {
getdetails(pass, the, params, you, need)
};
Update to be sure I'm clear:
Don't call the function your trying to pass as a callback!!!!
You're doing this (wrong);
elem.addEventListener('change', myFunc());
You need to do this (right):
elem.addEventListener('change', myFunc);
Now, for dealing with passing parameters to myFunc you can do this:
elem.addEventListener('change', function(e) {
myFunc(some, parameters, here);
});
OR:
elem.addEventListener('change', someFunc);
function someFunc(e) {
myFunc(some, parameters, here);
}

How to know with jQuery that a "select" input value has been changed?

I know that there is the change event handling in jQuery associated with an input of type select. But I want to know if the user has selected another value in the select element ! So I don't want to run code when the user select a new element in the select but I want to know if the user has selected a different value !
In fact there are two select elements in my form and I want to launch an ajax only when the two select elements has been changed. So how to know that the two elements has been changed ?

You can specifically listen for a change event on your chosen element by setting up a binding in your Javascript file.
That only solves half your problem though. You want to know when a different element has been selected.
You could do this by creating a tracking variable that updates every time the event is fired.
To start with, give your tracking variable a value that'll never appear in the dropdown.
// Hugely contrived! Don't ship to production!
var trackSelect = "I am extremely unlikely to be present";
Then, you'll need to set up a function to handle the change event.
Something as simple as:-
var checkChange = function() {
// If current value different from last tracked value
if ( trackSelect != $('#yourDD').val() )
{
// Do work associated with an actual change!
}
// Record current value in tracking variable
trackSelect = $('#yourDD').val();
}
Finally, you'll need to wire the event up in document.ready.
$(document).ready(function () {
$('#yourDD').bind('change', function (e) { checkChange() });
});

First of all you may use select event handler (to set values for some flags). This is how it works:
$('#select').change(function () {
alert($(this).val());
});​
Demo: http://jsfiddle.net/dXmsD/
Or you may store the original value somewhere and then check it:
$(document).ready(function () {
var val = $('#select').val();
...
// in some event handler
if ($('#select').val() != val) ...
...
});

First you need to store previous value of the selected option, then you should check if new selected value is different than stored value.
Check out the sample!
$(document).ready(function() {
var lastValue, selectedValue;
$('#select').change(function() {
selectedValue = $(this).find(':selected').val();
if(selectedValue == lastValue) {
alert('the value is the same');
}
else {
alert('the value has changed');
lastValue = selectedValue;
}
});
});​

You can save the value on page load in some hidden field.
like
$(document).ready(function(){
$('hiddenFieldId').val($('selectBoxId').val());
then on change you can grab the value of select:
});
$('selectBoxId').change(function(){
var valChng = $(this).val();
// now match the value with hidden field
if(valChng == $('hiddenFieldId').val()){
}
});

$("select").change(function () {
var str = "";
$("select option:selected").each(function () {
str += $(this).text() + " ";
});
$("div").text(str);
})
.change();
http://docs.jquery.com/Events/change