When I select a value from the option and click on a button, I want to fetch the selected value with javascript. What am I doing wrong? My value is always 1.
<select id="aand_select">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
// javascript code
var e = document.getElementById("aand_select");
var quantity= e.options[e.selectedIndex].value;
This apparently will do
var e = document.getElementById("aand_select");
e.addEventListener('change', function(){
var quantity= e.options[e.selectedIndex].value;
console.log(quantity);
},false);
Make sure that you are calling the javascript at the appropriate time. For example if you are calling it only when the page loads, the value will never change. Make sure you are calling it from an onClick() or some other event.
Related
Context
First off, I am not a developer but I have tried to explain the desired outcome...
I want to use Vanilla JS for this solution.
The problem
I have multiple select dropdowns on the page and ideally want to be able to store the value onchange of each of the dropdowns.
<select name="Value1A" id="Value1A" onchange="storeValue()">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select name="Value1B" id="Value1B" onchange="storeValue()">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
Essentially I want to achieve this...
This is of course not actual working code but hopefully explains what I am trying to do
function storeValue(){
localStorage.setItem(select.id, select.value);
}
i.e. I want to use the select id as the localStorage key - and onchange store the value of the option of that select field (onchange).
Any help would be really appreciated. Any questions or need to me to explain better, let me know.
Pass event inside your onclick handler
it will look like this
<select name="Value1A" id="Value1A" onchange="storeValue(event)">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
After inside your storeValue function get the id from event.target like this
function storeValue(event){
localStorage.setItem(event.target.id, event.target.value);
}
In your case you want to store and later retrieve those values.
// Add id:s and values:
<select> // select has children -> the children are the options.
// the children have values and id:s.
<option id ="1" value="0" >0</option>
<option id ="2" value="1" >1</option>
<option id ="3" value="2" >2</option>
<option id ="4" value="3" >3</option>
<option id ="5" value="4" >4</option>
<option id ="6" value="5" >5</option>
</select>
we begin by targeting the select tag and using "onchange" everytime someone clicks on the select the function gets triggered.
The "this" is the current context i.e we will be able to find the currently clicked on child of select which is an option, using this.selectedIndex which is the index number of the currently clicked on option i.e index number will be 0 for the top option and 1 for the next etc etc.
We use the index number inside this.children i.e the children of the select and by now we know the children in this case are the option tags.
document.getElementsByTagName('select')[0].onchange = function() {
var index = this.selectedIndex;
// console.log(this) to see what "this" prints out.
// above line returns the index number of selected
// option
var inputText = this.children[index].value;
// do -> console.log(inputText); to see for your self.
// above we use the index number on the range of options.
// The index number helps us find the option that was clicked.
// Now we add .value to to retrieve the value.
var id = this.children[index].id;
// same as above to retrieve id
localStorage.setItem(id, inputText);
// above saves variables id and inputtext to localstorage.
}
I have a select form element with values from 1-7+. If the user selects "7+" I want the URL to go to emailForm.php. How can I get this to work? The other options will be captured when the user click a submit button.
<select id="replyNumber">
<option selected="true" disabled="disabled" value="">No of people</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7+" onchange="document.location.href=emailForm.php">7+</option>
</select>
You cannot add onchange to option but need to add it to select tag.
You can add on a function changePage and you can check value and then implement the page change like below
<script>
function changePage() {
var val = document.getElementById("replyNumber").value;
if (val == "7+") {
document.location.href='emailForm.php'
}
}
</script>
<select id="replyNumber" onchange="changePage()">
<option selected="true" disabled="disabled" value="">No of people</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7+">7+</option>
</select>
You can solve this in JavaScript.
First add an onchange=testFunction(this) attribute to your select tag.
Then create and define a function in your JavaScript like follows:
function testFunction(el) {
if (el.value === '7+') {
// change the webpage you're currently on
document.location.href = 'emailForm.php';
// change the url your form posts to
document.form-name.action = 'emailForm.php';
}
}
Whenever a user changes your select box it'll call this function, you can then choose what values to check for, what to do when certain values are selected without submitting the form itself.
I`ve a "select":
<select class="date-select2" name="date">
<option selected="selected" value="">All</option>
<option value="11-2015">11-2015</option>
<option value="10-2015">10-2015</option>
<option value="09-2015">09-2015</option>
<option value="07-2015">07-2015</option>
<option value="06-2015">06-2015</option>
<option value="04-2015">04-2015</option>
<option value="03-2015">03-2015</option>
</select>
When I`m try to get value of select,
document.getElementsByClassName('date-select2')[0].value
it normally returns a value of selected item in Chrome. In FF and Safari sometimes it returns an empty string, when selected a numeric value(not "All").
How to deal with it?
I think this might help you:
HTML
<select class="date-select2" name="date" onchange="myFunction(this.value)">
<option selected="selected" value="">All</option>
<option value="11-2015">11-2015</option>
<option value="10-2015">10-2015</option>
<option value="09-2015">09-2015</option>
<option value="07-2015">07-2015</option>
<option value="06-2015">06-2015</option>
<option value="04-2015">04-2015</option>
<option value="03-2015">03-2015</option>
</select>
JavaScript
function myFunction(curValue) {
alert(curValue);
}
Working : Fiddle
Note: Also remember to put your JavaScript code inside body also right before it ends.
var select = document.querySelector('select.date-select2');
// add onchange handler
select.onchange = function(){
var idx = select.selectedIndex;
var val = select.options[idx].value;
// if All is selected use text of option
if(val=="")
val = select.options[idx].textContent;
};
You can try this way to get selected item:
$(".date-select2 option:selected").text();
I've got a button and list of options. The idea is that when user clicks the button the default option changes from disabled to max value. And oposite - if the input is not checked, the default is again disabled.
But the value returns undefined. If I change the first and thelast to numeric values, everything works fine. What's wrong?
<input class="input" type="checkbox" value="1" name="select-pot[]">
<select id="select" name="q-count[]">
<option disabled selected> -- choose -- </option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
jQuery(function(){
jQuery(".input").click(function(){
var thefirst = jQuery(this).next('#select option:first').val();
var thelast = jQuery(this).next('#select option:last').val();
if( jQuery(this).is(':checked') )
jQuery(this).next('#select').val(thelast);
else
jQuery(this).next('#select').val(thefirst);
});
});
.next() gets the next sibling, so you need to get the select and use .find() or .children() afterwards:
var thefirst = jQuery(this).next('#select').find('option:first').val();
var thelast = jQuery(this).next('#select').find('option:last').val();
Since IDs must be unique, there's no point in doing something like:
jQuery(this).next('#select option:first')
when
jQuery('#select option:first')
would suffice, plus .next() would fail here since it evaluates the siblings of an element and filters on anything you pass, but your filter is what would cause it to not match anything.
Instead, use:
jQuery(".input").click(function () {
var thefirst = jQuery('#select option:first').val();
var thelast = jQuery('#select option:last').val();
if (jQuery(this).is(':checked')) jQuery('#select').val(thelast);
else jQuery('#select').val(thefirst);
});
jsFiddle example
The vanilla javascript alternative for future viewers
(function () {
"use strict";
var inputs = document.getElementsByClassName('input'), input;
for (var i = 0; input = inputs[i]; i++) {
input.addEventListener('click', function (e) {
e.target.nextElementSibling.lastElementChild.selected = e.target.checked;
e.target.nextElementSibling.firstElementChild.selected = !e.target.checked;
}, false);
}
})();
<input class="input" type="checkbox" value="1" name="select-pot[]">
<select id="select" name="q-count[]">
<option disabled selected>-- choose --</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
I need to get the selected option value which resides insides a span tag.
<span id ="resolutionSpan">
<select name="resolution" id="resolution">
<option value="0" selected >0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</span>
I have tried
var e = document.getElementById("resolution");
console.log( e.options[e.selectedIndex].text);
But that returns a null value. Do i need to iterate the span first?
Due to project limitations, i cant use jquery. Need ur comments in javascript
Get the .options, then .selectedIndex, then .text. Like this:
var selected = document.getElementById('resolution').options[document.getElementById('resolution').selectedIndex].text
alert(selected);
<span id ="resolutionSpan">
<select name="resolution" id="resolution">
<option value="0" selected >0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</span>
Hope this helps!
I believe .text selects the label.
If you want the value of the selected item use .value.
fiddle: http://jsfiddle.net/9wxqmLL1/
var e = document.getElementById("resolution");
console.log( e.options[e.selectedIndex].value);
Your code is actually very close, just change .text to .value:
var e = document.getElementById("resolution");
console.log( e.options[e.selectedIndex].value);
unless you wanted to get the actual content of the option (which in this case is the same value but still)
var e = document.getElementById("resolution");
console.log( e.options[e.selectedIndex].innerHTML);