onchange event in jQuery - javascript

I am trying to implement onchange event in jQuery on select field,as jQuery does not create cross browsers compatibility problems. My scripting code is:
<script>
$('#payment_method').change(function () {
if ($('#payment_method').val() == 'check') {
alert('hello');
}
});
</script>
and here is the code for the select field:
<select id="payment_method" name="country" class="form-control" >
<option value="">Select One</option>
<option value="check">Check</option>
<option value="bank_transfer">Bank/Wire Transfer</option>
<option value="paypal">Paypal</option>
<option value="smart_card">Smart Money Card</option>
</select>
but nothing is happening when I select check option.

You need ready event to run your code when document is ready.
<script>
$(document).ready(function(){
$('#payment_method').change(function () {
if ($(this).val() == 'check') {
alert('hello');
}
});
});
</script>

It may be useful to use
$(this).val()
instead of
$('#payment_method').val()
to avoid DOM lookups.

Related

Click the same option again in a select with JQuery

I have the next code with a Select:
http://jsfiddle.net/pdkg1mzo/18/
The problem is that I want to launch the alert every time a select option is clicked, although the option that was clicked is the one that is currently selected.
This may work:
$(function(){
$(".normal").on("change",function(){
//alert("trigger");
var selectedName = $('#selectId').find(":selected").text();
console.log('selectedName is: ', selectedName)
alert(selectedName)
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="normal" id="selectId">
<option value="18">John</option>
<option value="18">Lorry</option>
<option value="19">Jerry</option>
<option value="20">Smith</option>
</select>
You could add a half second delay to the alert, so it shows the name after the selection has been made:
$(function(){
$(".normal").on("change",function(){
//alert("trigger");
var selectedName = $('#selectId').find(":selected").text();
console.log('selectedName is: ', selectedName)
setTimeout(function () {
//do something once
alert(selectedName)
}, 500);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="normal" id="selectId">
<option value="18">John</option>
<option value="18">Lorry</option>
<option value="19">Jerry</option>
<option value="20">Smith</option>
</select>
Try this,
$(function(){
$(".normal option").on("click",function(){
alert("trigger");
});
});
try this,
<select class="normal" name="mysel" onChange="show(this);">
<option value="18">John</option>
<option value="18">Lorry</option>
<option value="19">Jerry</option>
<option value="20">Smith</option>
</select>
pure javascript
<script>
function show(m){
var k=m.options[m.selectedIndex].value;
alert(k);
}
</script>
Try this it perfectly works.
I think you can't do this, but perhaps you can try Chosen: https://plugins.jquery.com/chosen/.
I don't know why do you want to do this, do you want to reload de page, load Ajax results. Maybe it is unnecessary for user experience and you will not improve it at all.

What event can I bind on an option in a select multiple?

Assuming I have a multiple select list like:
<select name="persons" id="persons" multiple size="8">
<option id="captureMe">Test option</option>
<option value="" disabled="disabled">─────────</option>
<option value="FR">Franck</option>
<option value="GE">Georges</option>
<option value="DA">David</option>
<option value="LU">Luc</option>
<option value="DO">Donald</option>
<option value="FR">FRANCOIS</option>
</select>
What event can I bind on $("#captureMe") ?
I tried some scripts like
$("#captureMe").change(function() {alert("got it!");});
$("#captureMe").on("change", function() {alert("got it!");});
$("#persons").on("change", "#captureMe", function() {alert("got it!");});
But none of these works nor with the click event.
So my question is, what event can I bind to an option in a select multiple ?
I don't wont the event being fired from the select but from the option by itself
(The goal could be firing an ajax call when a specific option is changed)
You can use click event instead of change:
$("#captureMe").on('click', function(){
console.log("got it!");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="persons" id="persons" multiple size="8">
<option id="captureMe">Test option</option>
<option value="" disabled="disabled">─────────</option>
<option value="FR">Franck</option>
<option value="GE">Georges</option>
<option value="DA">David</option>
<option value="LU">Luc</option>
<option value="DO">Donald</option>
<option value="FR">FRANCOIS</option>
</select>
Please, take a look to the following code:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
<select name="persons" id="persons" multiple size="8">
<option id="captureMe">Test option</option>
<option value="" disabled="disabled">─────────</option>
<option value="FR">Franck</option>
<option value="GE">Georges</option>
<option value="DA">David</option>
<option value="LU">Luc</option>
<option value="DO">Donald</option>
<option value="FR">FRANCOIS</option>
</select>
</body>
<script>
$("#persons").change(function() {
var values = $("#persons").val();
if($.inArray($("#captureMe").val(), values) > -1){
if(!$("#captureMe").prop("isSelected")){
$("#captureMe").prop("isSelected", true);
console.log("'caputreMe' is selected");
}
}else{
if($("#captureMe").prop("isSelected")){
$("#captureMe").prop("isSelected", false);
console.log("'caputreMe' is unselected");
}
}
});
</script>
</html>
I hope it helps you. Bye.
$(document).on("change", "#persons", function() {alert("got it!");});
You can for example use the :selected selector, see https://api.jquery.com/selected-selector/
$("select").change(function() {
$("#captured-by-id:selected").each(function() {
alert($(this).text());
});
});
Here's a Fiddle.
isn't it possible to make it work in following way?
var selectedValue = "";
$("#persons").change(function() {
var values = $(this).val();
if()// condition to check if #captureme option is present in "selectedValue" variable
{
// logic
}
else if() // condition to check if #captureme was not present in "selectedValue" before and is selected now
{
// logic
}
selectedValue = value;
});

Default value in select triggering Javascript method

how to let a select trigger a javascript method when the select is being populated and set to default value?
Thanks in advance
This can easily been done with the change event handler.
$('select').change(function(){
if ($(this).val() == 'default') {
console.log('selected default');
} else {
$('p').text($(this).val());
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option value="default"></option>
<option value="Hello World!">Hello</option>
<option value="Foo and Bar are common used example names">Foo</option>
</select>
<p>Please pick an option.</p>
You can use on change event to handle it .
Javacript/Jquery
function printData() {
console.log("On change of the select box your this fuction will get call");
}
$(document).ready (function () {
$('select').change(function(){
printData();
});
})
HTML
<lable>Select option.</lable>
<select>
<option value="1">Hi</option>
<option value="2">Hello</option>
<option value="3">How are you</option>
</select>

select optionlist jquery function

<select id="RB_0_field_select_0">
<option value="">Select a Field</option>
<option value="Audit">Audit</option>
<option value="Author">Author</option>
<option value="Barcode">Barcode</option>
<option value="Category">Category</option>
<option value="DocType">Content Type</option>
</select>
<script type="javascript">
$('select[id="RB_0_field_select_0"]').change(function(){
alert("hello");
alert($(this).val());
alert($( "#RB_0_field_select_0 option:selected" ).text());
});
</script>
I want to print the value selected in option list but its not working.
How to do this?
Your code is working, you just need to include jquery on top:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Here is a demo, I did not change anything in your code, i just added jquery
$('select[id="RB_0_field_select_0"]').change(function() {
alert("hello");
alert($(this).val());
alert($("#RB_0_field_select_0 option:selected").text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="RB_0_field_select_0">
<option value="">Select a Field</option>
<option value="Audit">Audit</option>
<option value="Author">Author</option>
<option value="Barcode">Barcode</option>
<option value="Category">Category</option>
<option value="DocType">Content Type</option>
</select>
OR
Maybe your script runs before the document is loaded, if that is the case, do this:
$( document ).ready(function() {
$('select[id="RB_0_field_select_0"]').change(function() {
alert($(this).val());
});
});
If it doesn't alert even "hello" it means that you are binding event before DOM is loaded - so you don't attach event handler at all to anything. Try to do it on DOMContentLoaded event:
$(function() {
$("#RB_0_field_select_0").change(function () {
$(this).val();
});
});
Try
this.options[this.selectedIndex].value;
or
$(this).options[$(this).selectedIndex].value;

Hide submit button if selected option value is null

I have the following form:
var x = document.getElementById("submit-button");
if (x.selectedIndex.value == null) {
$("#submit-button").css("display","none");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select>
<option disabled selected>Select colour</option>
<option value="Orange">Orange</option>
<option value="Apple">Apple</option>
<option value="Lemon">Lemon</option>
</select>
<button id="submit-button" type="submit">Click</button>
</form>
If the selected index of the dropdown is the disabled placeholder option with no value, i want to hide the submit button. As soon as a colour is selected i want to show the button again.
Any help will be appreciated.
You are in the right way. But missing some points with events:
1 - The whole code must be executed when DOM is ready (document loaded)
2 - You must observe the select change event to check for changes
3 - You can use jQuery .hide() and .show() do control the element's visibility
// Executed when DOM is loaded
$(document).ready(function() {
// Executed when select is changed
$("select").on('change',function() {
var x = this.selectedIndex;
if (x == "") {
$("#submit-button").hide();
} else {
$("#submit-button").show();
}
});
// It must not be visible at first time
$("#submit-button").css("display","none");
});
Look this working fiddle
The shortest way would be
$(function(){
$("select").on("change", function(){
$("#submit-button").toggle(!!this.value);
}).change();
});
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<form>
<select>
<option selected value="">Select colour</option>
<option value="Orange">Orange</option>
<option value="Apple">Apple</option>
<option value="Lemon">Lemon</option>
</select>
<button id="submit-button" type="submit">Click</button>
</form>
You need to create an event handler for when the dropdown changes. In the example below I've hidden the submit button by default, and when the dropdown changes I toggle the visibility of the button based on if there is a selected value in the dropdown.
I allowed your "Select colour" option to be available just to better demonstrate how the event handler works.
$("#submit-button").hide();
$("select").on("change", function() {
if (this.value)
$("#submit-button").show();
else
$("#submit-button").hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select>
<option selected value="">Select colour</option>
<option value="Orange">Orange</option>
<option value="Apple">Apple</option>
<option value="Lemon">Lemon</option>
</select>
<button id="submit-button" type="submit">Click</button>
</form>
You should add a listener to your select like this:
$('form select').on('change', function(){
if($(this).val() == null){
$("#submit-button").hide();
}else{
$("#submit-button").show();
}
}).change();
It will check every time that changes the option, hiding the button when the option has no value and showing it when it does. Also, it will trigger that at first to hide for the initial case.
Hi there Kindly try the following solution and tell me if you wanted something like this :
$(document).ready(function(){
if($('select').val() == null){
$('#submit-button').css('display','none');
}
$('select').on('change', function() {
$('#submit-button').css('display','block');
});

Categories