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>
Related
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
I want to invoke javascript function when value in the dropdown list changes. I dont want to hardcode dropdown list id .
Hence not using document.getElementById
My Code:
<select id ="ddl" name="ddl" onmousedown="this.value='';" onchange="jsFunction(this.value);">
<option value='1'>One</option>
<option value='2'>Two</option>
<option value='3'>Three</option>
</select>
function jsFunction(value)
{
alert(value);
}
This is giving error ReferenceError: jsFunction is not defined
Fiddle : http://jsfiddle.net/6uyz4b8x/1/
Your code is working just fine, you have to declare javscript method before DOM ready.
I don't know why do you need this onmousedown event here, but what you have to do is put your function above actual usage. Look at the snipplet below:
<script type="text/javascript">
function jsFunction(value)
{
alert(value);
}
</script>
<select id ="ddl" name="ddl" onmousedown="this.value='';" onchange="jsFunction(this.value);">
<option value='1'>One</option>
<option value='2'>Two</option>
<option value='3'>Three</option>
</select>
using jQuery
$("#ddl").change(function () {
alert($(this).val());
});
jsFiddle
You just try this, Its so easy
<script>
$("#YourDropDownId").change(function () {
alert($("#YourDropDownId").val());
});
</script>
jsFunction is not in good closure. change to:
jsFunction = function(value)
{
alert(value);
}
and don't use global variables and functions, change it into module
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 am trying to create a function to run when a select option is changed. In my select menu i have;
<form id="frame">
<select id="frame_color" onchange="fChange()">
<option value="0">Polished Black</option>
<option value="1">Grey</option>
</select>
</form>
The only thing that I want the fChange() function to do is update the variable that is holding the options value with the onchange value. So, the variable in the function fChange starts off by holding the value "0", and when I change it to "Grey" I want the variable to update to "1". I am having a hard time figuring out how to code the function properly. Any suggestions?
following get the selected option value ...
function fChange()
{
var val = $("#frame_color").val();
}
fChange = function(){
var value = document.getElementById("frame_color").value;
alert(value);
}
try this, which is jQuery
<script type="text/javascript">
$(document).ready(function () {
$('#frame_color').change(function(){
// your code should be here
});
});
</script>
on jQuery:
$(function(){
$('#frame_color').on('change',function(){
your_variable = $(this).val()
});
});
for non-jQuery, a quick way to do it is:
document.getElementById('frame_color').onchange = function(e){
your_variable = e.target.value;
}
also, you might want to look at addEventListener for standards-compliant browsers, and attachEvent for IE6-8
var variable = 0;
function fChange()
{
var val = document.getElementById("frame_color").value;
variable = val;
}
<form id="frame">
<select id="frame_color" onchange="fChange()">
<option value="0">Polished Black</option>
<option value="1">Grey</option>
</select>
</form>
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