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>
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>
I have a select and an input that I would like the values to be returned by javascript anytime it is modified. For example if I have a select with option "Yes" and "No", if the person selects "No" then I want that value to be returned in Javascript so I can make an action for it.
<select name="detailslot13">
<option selected="selected" value="N">No</option>
<option value="Y">Yes</option>
</select>
For now I'd just like the value be alerted in javascript. Same thing with an input.
<input type="text" value="detailslot14" name="detailslot14" style="inherit !important;">
Thanks!
Try this:
<script type='text/javascript'>
$(function() {
$('select[name="detailslot13"], input[name="detailslot14"]').change(function() {
alert(this.value);
// write your code
});
});
</script>
Input will show alert when user will be done with editing textfield and will click anywhere outside the textfield.
Working Fiddle
You could attach an eventlistener on your elements which notifies you when some values has changed:
var elems = ['detailslot13', 'detailslot14'],
returnValueWhenChange = function(){
alert(this.value);
};
for(var i = 0, c = elems.length ; i < c ; i++){
document.getElementById(elems[i]).addEventListener('change', returnValueWhenChange)
}
Here's an working example
DEMO
You can use the following:
$(function() {
$(':input').on('input', function() {
alert( this.value );
});
});
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'm trying to post a custom data attribute on a select box option to a hidden form field.
Here's my html:
<select id="sampleorder" multiple="multiple">
<option value='xxx' data-amount='5'>Name</OPTION>
<option value='xxx' data-amount='15'>Name</OPTION>
<option value='xxx' data-amount='2'>Name</OPTION>
</select>
And jQuery
$('#submit_btn').click(function() {
var options = $('select#sampleorder');
var samplesSelected = options.val();
$('input[name=order]').val(samplesSelected);
$('input[name=quantity]').val(sampleAmount);
});
I'm guessing that my variable "sampleAmount" should look somewhat like this
var sampleAmount = options.val().data("amount");
But it's not giving me the expected results.
What would be a good approach to get the data attribute value per item?
Thanks!
why use jQuery? Just use event.target.options[event.target.selectedIndex].dataset.amount
Try this:
$('#submit_btn').click(function() {
var samplesSelected = $('#sampleorder').val(),
sampleAmount = $('#sampleorder option:selected').data("amount");
$('input[name=order]').val(samplesSelected);
$('input[name=quantity]').val(sampleAmount);
});
In pure vanilla javascript you can use :
var sampleAmount = this.selectedOptions[0].getAttribute('data-amount'));
Example:
function SelectChange(event) {
console.log(event.selectedOptions[0].getAttribute('data-amount'));
}
<select onchange="SelectChange(this)">
<option data-amount="1">one</option>
<option data-amount="2">two</option>
<option data-amount="3">three</option>
</select>
Try this,
HTML
Add id attribute to your select drop down
like
<select id="sampleorder" >
....
SCRIPT
var sampleAmount = $('select#sampleorder option:selected').data("amount");
Fiddle http://fiddle.jshell.net/3gCKH/
Another vanilla JS answer:
var selectContainer = document.getElementById('sampleorder')
var selectedOption = selectContainer.selectedOptions.item()
var amount = selectedOption.getAttribute('data-amount')
I forgot to mention it has to be a multi select box, sorry.
With your help and a brief look into the jQuery documentation I've managed to solve it:
$("select#sampleorderm").change(function () {
var samplesSelected = options.val().join("::");
var samplesAmount = "";
$("select#sampleorderm option:selected").each(function () {
samplesAmount += $(this).data("amount") + " ";
});
$('input[name=sampleorder]').val(samplesSelected);
$('input[name=sampleorderquantity]').val(samplesAmount);
});
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