My onchange function for this form select is executing onload but not when changing the selection in the form. I've tried using both onload and onclick.
I'm obviously only at the debugging implementation stage and will have it do other stuff once it works.
HTML:
<select case="sel1" name="Sort1" id="Sort1">
<option value="0">Fred</option>
<option value="1">Ginger</option>
<option value="2">Judy</option>
<option value="3">Gene</option>
</select>
JavaScript:
window.onload = function() {
document.getElementById('Sort1').onchange = ChgSort();
}
function ChgSort() {
alert(document.getElementById('Sort1').value);
}
When I load the page I get the alert popup with the current select value of 0. But when I click on the select field and change the option nothing happens.
I'm sure, and hope, it's something silly and stupid and I've just been staring and debugging the same function too long...
Help!
You will need to change on line this
document.getElementById('Sort1').onchange = ChgSort();
to this
document.getElementById('Sort1').onchange = ChgSort;
onchange should be function not the returned value look at the example below
window.onload = function() {
document.getElementById('Sort1').onchange = ChgSort;
}
function ChgSort() {
alert(document.getElementById('Sort1').value);
}
<select case="sel1" name="Sort1" id="Sort1">
<option value="0">Fred</option>
<option value="1">Ginger</option>
<option value="2">Judy</option>
<option value="3">Gene</option>
</select>
Your Javascript has:
window.onload = function() {
document.getElementById('Sort1').onchange = ChgSort();
}
The window.onload should be changed to window.onchange and it should work
Related
I have a jQuery Code, see below please.
$(document).ready(function () {
$('select').on('change', function () {
var test = this.value;
console.log(test);
})
});
which is working perfectly.
Now what I would like to do is, I want to save this code as a function so I can use it somewhere else. Can you help me please?
update
as you can see on the photo, there is a dropdownlist.
src="https://maps.googleapis.com/maps/api/js?
key=MYAPIKEY&
callback=initAutocomplete
&language=fr"
what I want to update is, whenever I choose the language from the dropdownlist the src attribute should get updated. In the src attribute you can see the value and in that value the last parameter is language.
I want to update the language parameter according to the dropdownlist.
Create a function like this:
function onChange() {
var test = this.value;
console.log(test);
});
Then, use that function as the change event handler:
$(document).ready(function () {
$('select').on('change', onChange);
});
Now you can reuse this function for any event handler.
There's multiple answer to store what you've done.
You can just store your action into a function, or you can create and attach the result action function into one function.
$(".my-select").on("change",function(){
actionAfterChange($(this).val())
});
//Just action
function actionAfterChange(value){
console.log("function actionAfterChange > ",value)
}
//Create event listener and attach a function
function attachEventAndAction(element,event,action){
$(element).on(event,function(){
action($(this).val())
});
}
attachEventAndAction(".my-select2","change",actionAfterChange)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="my-select">
<option value="1">1</option>
<option value="2">2</option>
</select>
<select class="my-select2">
<option value="1">1</option>
<option value="2">2</option>
</select>
Trying something that sounds simple but not working:
Allow a user to select an option from a dropdownlist and then have this displayed as an alert each time the user changes it. Here's what I've got so far:
<select name="pickSort" id="chooseSort" onchange="changedOption">
<option value="lowHigh" id="lowHigh">Price Low-High</option>
<option value="highLow" id="lowHigh">Price High-Low</option>
</select>
<script>
function changedOption() {
var sel = document.getElementsByName('pickSort');
var sv = sel.value;
alert(sv);
}
</script>
A better way of doing this without the inline stuff:
document.getElementById("chooseSort").onchange = function() {
alert(this.value);
};
jsFiddle here.
You need to call the function with parentheses changedOption()
<select name="pickSort" id="chooseSort" onchange="changedOption()">
I looked for a solution for this, but couldn't find it.
I have a simple select like this:
<select id="sltFiltroPedidos">
<option value="todos">Todos</option>
<option value="hoje">de hoje</option>
<option value="semana">da semana</option>
<option value="periodo">Período</option>
<option value="pedido">Número do pedido</option>
</select>
Always the user clicks on an option, a javascript event must be fired.
The onChange event in the select doesn't work for me, because the user can choose the same option, and the event must be fired as well.
I tried the onClick event on options. It works on IE and FF, but doesn't work on Chrome.
Any ideas how can I do it?
I wrote a code but it is not working on IE, just give it a try: http://jsfiddle.net/shahe_masoyan/scuhb/1/
<select id="sltFiltroPedidos">
<option value="todos">Todos</option>
<option value="hoje">de hoje</option>
<option value="semana">da semana</option>
<option value="periodo">Período</option>
<option value="pedido">Número do pedido</option>
</select>
var isOpen = false;
$('#sltFiltroPedidos').on('mouseup', function () {
if (isOpen){
alert(this.value);
}
isOpen = !isOpen;
});
As per your question you can do following :-
<select id="sel" onblur="showme()">
<option value="todos" >Todos</option>
<option value="hoje" >de hoje</option>
<option value="semana" >da semana</option>
<option value="periodo" >Período</option>
<option value="pedido" >Número do pedido</option>
</select>
But i don't know this right option or not. But this will work as you told.
function showme()
{
alert(document.getElementById('sel').value);
}
You can try onclick like,
var prevValue=$('select').val();
$('select').on('click',function(){
if(prevValue==this.value) // code for same values
// your code to run
});
I had the same issue. In my task, I needed to get the value of the selected option. This helped me:
let selectedOption = "";
<select>.addEventListener("change", event => {
selectedOption = event.target.value
});
The select variable is, obviously, the tag .
It might look strange, but select takes the value of the chosen option, that's why the code works.
Use:
$('#sltFiltroPedidos').on('change', function() {
alert( this.value );// or this.val()
});
Hope this will work for you
I am trying to have an option from a dropdown menu be sent to a Javascript function so I can query a database using AJAX by calling a PHP function. Unfortunately, it seems as if my onchange event is not even firing at all. I attempted to redirect the onchange event to a simple Javascript function just to test, and that is not working either. I can't for the life of me seem to figure it out. Attached below is my sample code (HTML and the sample test Javascript function):
HTML:
<div id="Category_and_Food">
<form>
<select id="categories" onchange="tested()">
<option value = "">Please select a category</option>
<option value="Appetizers">Appetizers</option>
<option value="Entree">Entree</option>
<option value="Specials">Specials</option>
<option value="Drink">Drinks</option>
<option value="Meat">Meat</option>
<option value="Soup">Soup</option>
</select>
</form>
<br />
<div id="cat_display"><b>Please select a category above</b></div>
</div>
Javascript:
<script type = "text/javascript">
function tested()
{
var x = document.getElementById("categories").value;
document.getElementById("cat_display").innerHTML = x;
{
</script>
Prior, I also tested this function with the onchange event being onchange="tested(this.value)" with the function reflecting the changed input.
You have a backwards }:
function tested()
{
var x = document.getElementById("categories").value;
document.getElementById("cat_display").innerHTML = x;
} // <----
Example: http://jsfiddle.net/L2abu/1/
Be sure to run your code through a tool like JSHint to check for syntax errors.
First, I have this input in a form.
<select id="entry_14">
<option value="Woman">Woman</option>
<option value="Man">Man</option>
</select>
Then I declared this variable.
var mygender = document.getElementById('entry_14').value;
but then, when I document.write, it already shows "Man" before the user even makes a selection, and after selecting woman, it still shows man.
How can I set the value of this variable to change, each time the user selects one of the options?
It executes immediately because your code is not in a function. You need to call this function when the select changes. Add an onchange handler to your select. In this example I pass this.value which is your select lists value to the function. Finally you can do whatever you want with that value.
<select id="entry_14" onchange="myfunction(this.value);">
<option value="Woman">Woman</option>
<option value="Man">Man</option>
</select>
<script>
function myfunction(val) {
document.write(val);
}
</script>
Declare a onchange event handler.
document.getElementById('entry_14').onchange = function(){
var mygender = this.value;
document.write(mygender);
}
Add a onChange JS handler to the <select> element. The example below shows an inline way of doing this...
<select id="entry_14" onChange="updateMyGender();">
....
</select>
<script>
var mygender = document.getElementById('entry_14').value;
function updateMyGender()
{
mygender = document.getElementById('entry_14').value;
}
</script>
I think you are looking for this
var mygender= document.getElementById('entry_14');
var gender= mygender.options[mygender.selectedIndex].value;// for value
var gender= mygender.options[mygender.selectedIndex].Text;//for text