We Keep Coding

Execute jQuery function on load and change

I have a select field in a form, and wish to execute some jQuery when the field is changed or when the page is reloaded on form submit.
<select name="emp_status_id" class="emp-status-id" >
<option value=""></option>
<option value="1">Full-Time Employment</option>
<option value="2">Part-Time Employment</option>
<option value="3">Casual</option>
<option value="4">Self Employed</option>
</select>
My jQuery is below
function employmentGroups(id){
var emp_status_id = id.val();
// Do more stuff here
};
$( ".emp-status-id" ).change(function() {
employmentGroups($(this));
});
Not: I am passing $(this) into the function rather than getting $(this) inside the function for another reason which isn't relevant to the current question.
This works perfectly well on change.
I would also like to execute the function on page load,
My problem is that I do not understand which jQuery method to use to execute this function on load.
I have tried this...
$( ".emp-status-id" ).ready(function() {
employmentGroups($(this));
});
However this does not work.

Better way to access this selectbox value by id.
Here is working code:
<select id="emp_status_id" name="emp_status_id" class="emp-status-id" >
<option value=""></option>
<option value="1">Full-Time Employment</option>
<option value="2">Part-Time Employment</option>
<option value="3">Casual</option>
<option value="4">Self Employed</option>
</select>
function employmentGroups(selector_id){
var emp_status_id = $(selector_id).val();
// Do more stuff here
};
// on page loaded
$(function() {
// set onchange handler
$("#emp-status-id").change(function() {
employmentGroups('#emp-status-id');
});
// just execute
employmentGroups('#emp-status-id');
});

$(document).ready(function(){ employmentGroups($( ".emp-status-id" )); })
Looking for this?

there's two ways to do such a thing like this
1- using load() but this will fire whatever the code inside every time page reload even when the use open the page for the first time
$(window).load(function() {
// do whatever you want
});
2- using built-in PerformanceNavigation interface ... i didn't test such a case to use it but it exactly for detecting navigation behavior
if (performance.navigation.type === 1) {
console.log('page reloaded');
}
or (is the same as above but with different syntax)
if (performance.navigation.type === PerformanceNavigation.TYPE_RELOAD){
console.log('page reloaded');
}
for further reading W3 and MDN

html form reset not doing triggering select onchange

I am having a form where the fields need to change according to my select.
But when I hit the reset the select resets back to default, but the onchange event on the select is not triggered. Is there anyway so that I can add that to my javascript?
I am resetting using a button with type="reset"
$('#newHistoryPart select[name="roundType"]').on('change', function (data)
{
$(".answerType").hide();
selected = $(this).find("option:selected").val();
roundTypeChange(selected);
});

From my comment above, use onreset event instead of onchange:
$('#yourform').on('reset', function(){
// do something
});

What you need to do is, trigger the change event manually when the reset button is clicked. See Fiddle here
$('select').on('change', function ()
{
alert('on change');
});
$('input[type="reset"]').click(function() {
$("select").trigger('change');
});`

you can use
$('select[name="roundType"]').prop('selectedIndex',0);
DEMO HERE

This may help you, replace alert lines with your activity code.
JSFiddle
HTML
<select name="opt" onchange="getval(this)">
<option value="Select" selected disabled>Select</option>
<option value="op1">Option 1</option>
<option value="op2">Option 2</option>
</select>
JavaScript
function getval(sel) {
if (sel.value == "op1") {
alert("Option 1 Selected");
} else if (sel.value == "op2") {
alert("Option 2 Selected");
}
else
{
alert("EXCEPTION !");
}
}

How to rebind the removed event of an anchor tag

I am unbinding the event based on the condition, once if the condition is true I am using jQuery off method when condition is false I need to bind the click event for anchor.
I tried the below code but I am unable to achieve it.
**Code : **
$('select').change(function(){
if($(this).val()=='mas'){
alert("inside");
$("#lnk").off('click');
}else
{
alert('else');
$("#lnk").on('click','.add');
}
});
$("a").on('click',function(){
alert('Iam clciked');
});
HTML:
<select>
<option val=''>Seect</option>
<option val='ind'>Ind</option>
<option val='mas'>mas</option>
</select>
<a href='#' class='add' id='lnk'>Go</a>
**Fiddler Link : **
//
http://jsfiddle.net/md5psv28/

You have this:
$("#lnk").on('click','.add');
Here, in the second argument of your on method, the ''.add'' is not a valid function/handler. You need to pass the function/handler here that you want to bind with it, instead you've passed a class.
You may try it like this:
$("a").on('click', addHandler);
function addHandler(){
alert('Iam clciked');
}
Updated Demo.

Why not just place the click handler within a function, and call it initially.
function bindClick() {
$("a").off('click').on('click', function () {
alert('Clicked.');
});
}
bindClick();
Then when the condition isn't satisfied, just call the function again to rebind it.
$('select').change(function () {
if ($(this).val() == 'mas') {
$("#lnk").off('click');
} else {
bindClick();
}
});
Updated Example

How to stop a select menu form opening or changing?

$('#selectmenu').on('keyup focus mousedown', function(e) {
e.preventDefault();
});
but when it is selected by pressing tab i can change the value by pressing up & down key.how to stop it?

Block the tab key.
$('/*The Previous Input */').on('keydown', function(e) {
if (e.keyCode == 9) {
e.preventDefault();
}
});
I don't have your HTML, so i can't test or integrate the code.
You also can use disabled="disabled", i think is a better solution.

You use off() or unbind() methods of jQuery:
<select id="dropDown" name="dropDown" style="margin-top: 5px; width: 150px;">
<option value="select">Select </option>
<option value="1">1</option>
<option value="2">2</option>
<option value="All">All </option>
</select>
<button id="stopChange" >Stop</button>
<button id="StartChange" >Start</button>
jQuery code:
$("#stopChange").click(function () {
$("#parSelCategor").unbind("change");
});
$("#StartChange").click(function () {
$("#parSelCategor").bind("change");
});

You may listen you a more global event like 'onchange' and change the value back to the previous one when the event trigger.
Disabling the select may work too.
Edit : 'keydown' seems like a good idea too.

you can change the tabindex of the select box
$('#selectmenu').attr('tabindex', -1).on('keyup focus mousedown', function (e) {
e.preventDefault();
});
or best way is just disable the control
$('#selectmenu').attr("disabled", true);
Demo

Here's a solution that simply forces the selection to stay the same if some variable (stopChange) is true.
JS (jQuery):
var stopChange = true;
var opt = $('option:selected');
$('#selectmenu').on('change', function () {
if (stopChange) {
opt.attr('selected', true);
}
});
Here's a fiddle.

Select box option value on right-click: without using option:selected

My question is different than just "how do I get the selected option from a select box".
In select box, no option element is 'selected' prior to right-clicking on it.
On right-clicking an option, I want to get the value of that option element.
Therefore, option:selected won't work.
<select name='mySel' id='mySel' multiple>
<option value='val1'>myOption1</option>
<option value='val2'>myOption2</option>
</select>
I have bound rightclick event to the context menu:
// bind right click event to context menu
(function( $ ) {
$.fn.rightClick = function(method) {
$(this).bind('contextmenu rightclick', function(e){
e.preventDefault();
method();
return false;
})
};
})( jQuery );
The event handler code below will only work if an option is selected prior to right clicking:
$('#mySel').rightClick(function(e){
alert($('#mySel option:selected').text());
});
Without using option:selected, how do I get the value of right-clicked option?

The target property of the event parameter will refer to the element which triggered the event, in your case the option element that was right-clicked:
$('#txBase').rightClick(function(e){
alert(e.target.value); // val1 or val2
});
DEMO
A few notes about your code:
no need to return false and to e.preventDefault, both statement have the same result so just use one or the other
you might wanna check if method is not undefined and is a function before calling it, otherwise it will break
when you call method, pass the parameter e to it otherwise you won't be able to use inside your callback
Here's the modified code:
$(this).bind('contextmenu rightclick', function(e) {
e.preventDefault();
if (method && $.isFunction(method)) {
method(e); // pass the event parameter to your callback
}
})

<select name='mySel' id='mySel' multiple>
<option value='val1' oncontextmenu="getValue(this);return false">myOption1</option>
<option value='val2' oncontextmenu="getValue(this);return false">myOption2</option>
</select>
<div id="status"></div>
<script>
function getValue(t){
document.getElementById('status').innerHTML=t.value;
}
</script>
What about this?