Suposse user hits SPACE in a text -field. I want to check the value in the select -box. I use input.addEventListener('keydown', function(e)... to track the SPACE-hitting-point but how can I get the value of the select block <select id='topic'><option value="hello"></option> ...</section>?
How can you stdout the value of the selected index? Cannot understand why not below.
var el = document.getElementById("topic");
var topicValue = el.options[el.selectedIndex].value;
// PROBLEM: Won't do anything (despite inside <script> -tags)
window.alert(topicValue);
where the topic is the select <select id="topic"[^>]*>[^<]*</select>.
There any many events you can look at.
This has a list of them all
http://www.w3schools.com/tags/tag_select.asp
onkeydown and onmousedown will alert you prior to the onchange (user pressing enter) event
The events work in the select, not to options but just conditional to the script.
<html>
<body>
<script>
function alertMe(option){
if(option == "saab"){
window.alert("you clicked saab in selec!");
document.getElementById("txt").value='saab!';
}
}
</script>
<select onChange="alertMe(this.value);">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="m"> Mercedes</option>
<option>Audi</option>
</select>
<input type="text" id="txt" value="change me"></input>
</body>
</html>
[Answers to the updated]
You can access the select with document.getElementById('topic').options.selectedIndex or mySelect.options[selectedIndex].value (does not work with me). And apparently you could create a form to which you could refer by document.forms['topic'].elements[id] but not sure about this one. More.
#Kosh that is irritating! Just do a dictionary = {0:"topic", 1:"hello",...,n:"topic_{n}"} and then use the getElementById('topic').selectedId as a key and forget the values. Not solved but rounded.
[Update] I think I solved it, just el.value, no selectedIndex needed:
<html>
<body>
<script>
function printSelectValue()
{
var el = document.getElementById("selectOne");
alert(el.value);
}
</script>
<select id="selectOne" onChange="printSelectValue()">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="m"> Mercedes</option>
</select>
</body>
</html>
Related
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');
});
I am a beginner in java-script , what I am doing right here is trying to make my combo-box named "dale" to enable and disable when i select "Reasons Specific Categorized" from my combo-box named "repSelect" but i keep getting an error on my java-script.
function makeEnable(value){
if(value=="rep4"){
var x=document.getElementById("dale")
x.disabled=false
}else{
var x=document.getElementById("dale")
x.disabled=true
}
}
</script>
</script>
<select onChange="makeEnable(value)" name="repSelect">
<option value="rep1">Employee</option>
<option value="rep2">Category Reasons Overall </option>
<option value="rep3">Department Overall </option>
<option value="rep4">Reasons Specific Categorized </option>
</select>
<select name="dale">
<option value="rep1">dale</option>
</select>
<input class="button" type="submit" value="Generar Reporte" >
</form>
My modification But dosent work
function makeEnable(){
var e = document.getElementById("repSelect");
var strUser = e.options[e.selectedIndex].value;
if(strUser=="rep4"){
document.getElementById("dale").disabled=false;
}else{
document.getElementById("dale").disabled=true;
}
}
You are using the .getElementById() method, but your element doesn't have an id defined. Add an id in the html:
<select id="dale" name="dale">
You may also need to modify the call to your function in the first select's onchange handler, to pass this.value instead of just value:
<select onChange="makeEnable(this.value)" name="repSelect">
You can also substantially simplify your function as follows:
function makeEnable(value){
document.getElementById("dale").disabled = value!="rep4";
}
Demo: http://jsfiddle.net/3t16p5p9/
EDIT: I just noticed that you had the jquery tag on your question. To use jQuery, remove the inline onChange= attribute and then add this to your script:
$(document).ready(function() {
$("select[name=repSelect]").change(function() {
$("#dale").prop("disabled", this.value!="rep4");
}).change();
});
This binds a change handler to the first select, and then calls it immediately so that the second one will be appropriately enabled or disabled when the page loads (as requested in a comment).
Demo: http://jsfiddle.net/3t16p5p9/2/
Actually you are using document.getElementById but your combobox doesn't have an Id.
Thats the reason its not working.
Instead of adding onchange in the html, use as below:
<select id='repselect' onchange=makeEnable() name="repSelect">
<option value="rep1">Employee</option>
<option value="rep2">Category Reasons Overall </option>
<option value="rep3">Department Overall </option>
<option value="rep4">Reasons Specific Categorized </option>
</select>
<select id="seldale" name="dale">
<option value="rep1">dale</option>
</select>
<input class="button" type="submit" value="Generar Reporte"/>
$('#repselect').change(function(){
if(this.value=="rep4"){
var x= document.getElementById("seldale")
x.disabled=false
}else{
var x =document.getElementById("seldale")
x.disabled=true
}
});
I'm trying to achieve one simple requirement, but couldn't make it!
My requirement is very simple - wanna display some alert to the user based on the options he selects from the drop down.
Below is the code, I've designed now. Please check and correct me where I'm going wrong.
<SCRIPT type="text/javascript">
var txt = this.getField("ddPortfolio").value;
If(txt == "Distribution")
window.alert("distribution");
</SCRIPT>
<div style="float:right">
<select name = "ddPortfolio">
<option value="volvo">-- Select Option --</option>
<option value="saab">Training</option>
<option value="mercedes">Internal</option>
<option value="audi">External</option>
</select>
</div>
You have some syntax errors. Also there is no Distribution value in your options. I think you want this:
html
<div style="float:right">
<select name = "ddPortfolio" onchange="test(this);">
<option value="volvo">-- Select Option --</option>
<option value="saab">Training</option>
<option value="mercedes">Internal</option>
<option value="audi">External</option>
</select>
</div>
js
function test(obj){
var txt = obj.value;
if(txt == "audi"){
window.alert("audi");
}
}
fiddle
HTML
<select onchange="getval(this);">
<option value="1">One</option>
<option value="2">Two</option>
</select>
SCRIPT
<script type="text/javascript">
function getval(sel) {
alert(sel.value) ;
}
</script>
Simple Drop down box working using javascript.
You checked If(txt == "Distribution") but that was not one of the options in your select in the code you provided. also it's the onchange triegger you need
You also need to add an id to the select so you can reference it for example
HTML snippet
<select name = "ddPortfolio" id = "ddPortfolio">
Javscript
var MyColumn = document.getElementById("ddPortfolio");
MyColumn.onchange = function(){if (MyColumn.value == "audi") {alert('hi');}};
http://jsfiddle.net/64Z7H/
<form>
<SELECT NAME="sel" onChange="split(selected value)">
<OPTION VALUE=1>Milk</option>
<OPTION VALUE=2>tea</option>
<OPTION VALUE=3>water</option>
<OPTION VALUE=4>coffee</option>
</SELECT>
</form>
Hi i need to pass the selected value immediately on inside of this select tag so pls some one help me
Not that I agree with how you're doing things here (in side the tag), technically it is possible to do what you ask by the following:
<form>
<SELECT NAME="sel" onChange="split(this.value)">
<OPTION VALUE=1>Milk</option>
<OPTION VALUE=2>tea</option>
<OPTION VALUE=3>water</option>
<OPTION VALUE=4>coffee</option>
</SELECT>
</form>
You cannot pass the value directly to the handler but you can get the values in it, I'd recommend to do this in code and not use inline event handlers:
var select = document.forms[0].sel;
select.onchange = function(){
var value = select.options[select.selectedIndex].value; // to get Value
var text = select.options[select.selectedIndex].text; // to get Text
}
Here's a working example:
http://jsfiddle.net/c2SrV/
<html>
<head>
<script>
function split(value)
{
alert(value);
}
</script>
</head>
<body>
<form>
<SELECT NAME="sel" onChange="split(value)">
<OPTION VALUE=1>Milk</option>
<OPTION VALUE=2>tea</option>
<OPTION VALUE=3>water</option>
<OPTION VALUE=4>coffee</option>
</SELECT>
</form>
<body>
</html>
use "value". hope this was helpful
this.options[this.selectedIndex].value
*assuming you want to put it inline inside the onchange attribute
I have a multitude of dropdown boxes within my web page. One of these dropdown boxes is used for a single selected value out of a list of options.
<SELECT id="Box0" name="">
<OPTION value="1920">my weird description</OPTION>
<OPTION value="1225">other weird description</OPTION>
<OPTION value="3112">some name dynamically fetched</OPTION>
</SELECT>
How can I add an event to this section, so when it is in focus, I could use numeric keys like 1,2.. to select an option instead of using the mouse or arrow keys for selecting an option? For clarification: if I press 1 on my keyboard, the selected value would become the first value from that list, with 2 the selected value becomes second value from that list.
I choose not to use a library/framework such as JQuery/Mootools.
You could put a 'rel' attribute on each option which would be the required key for selecting that option. So, for your example it could be:
<select id="Box0" name="">
<option value="0" rel="0">None</option>
<option value="1" rel="1">First</option>
<option value="2" rel="2">Second</option>
<option value="3" rel="x">Millionth</option>
</select>
You wouldn't be looking for the onfocus() event though, you would be looking for the onkeydown() (or similar) event on the select box, which could look something like this:
var MySelect = document.getElementById('Box0');
var MyOptions = MySelect.getElementsByTagName('option');
var KeyPressed = //detect which key has been pressed. I can't remember the
//specific code for this off the top of my head
for (i=0; i<MyOptions.length; ++i) {
if (MyOptions[i].rel == KeyPressed) {
MyOptions[i].selected = true;
} else {
MyOptions[i].selected = false;
}
}
If you have less than 10 options, simply add the number to the text:
<option value="0">0 none</option>
<option value="1">1 first</option>
<option value="2">2 second</option>
or perhaps easier to read:
<option value="0">0 none</option>
<option value="1">1st</option>
<option value="2">2nd</option>
No other coding necessary
I think this can solve your problem
<html>
<head>
<script type="text/javascript">
function selectvalue(e){
e = e || event;
var key = e.which || e.keyCode;
if(!e.shiftKey && key >= 48 && key <= 57){
var option = this.options[key - 48];
if(option){
option.selected = "selected";
}
}
}
</script>
</head>
<body>
<SELECT id="Box0" name="" onkeypress="selectvalue.apply(this, arguments)">
<OPTION value="1920">my weird description</OPTION>
<OPTION value="1225">other weird description</OPTION>
<OPTION value="3112">some name dynamically fetched</OPTION>
</SELECT>
</body>
</html>
The javascript looks little messy because it has to handle IE and all other browsers.
IE does not pass an event object to the handler function instead we have to use the global event object.
Same way the keycode also is stored in keyCode instead of which in IE.