I have a datalist that looks like :
<datalist id="foodlist">
<option value="one" ></option
<option value="two" ></option>
<option value="three" ></option>
</datalist>
<input type="text" list="foodlist" autocomplete=true id="inputItem"/>
I want an event to fire when user selects on of the option in the list using JavaScript.
How to achieve it?
onClick, onChange does not seem to work.
I know this is kind of old, but I thought I should document it somewhere. If you're trying to detect input from a dropdown selection rather than a click per se, you can use the "input" event and check the type of the passed event object - cut/paste/keypress input will pass an "InputEvent" object, whereas a datalist selection will pass a generic "Event" object.
var textbox = document.getElementById("inputItem");
textbox.addEventListener("input", function(e){
var isInputEvent = (Object.prototype.toString.call(e).indexOf("InputEvent") > -1);
if(!isInputEvent)
alert("Selected: " + e.target.value);
}, false);
<datalist id="foodlist">
<option value="one" ></option>
<option value="two" ></option>
<option value="three" ></option>
</datalist>
<input type="text" list="foodlist" autocomplete=true id="inputItem"/>
<datalist id="foodlist">
<option value="one" ></option>
<option value="two" ></option>
<option value="three"></option>
</datalist>
<input id="txt" type="text" list="foodlist" autocomplete=true id="inputItem"/>
document.getElementById('txt').addEventListener('input', function () {
console.log('changed');
var val = document.getElementById("txt").value;
alert(val);
});
The datalist tag is only supported in some browsers. Here's simple trick to get selected value.
While this is 4 years old, I stumbled across it today, and ran into the cross browser issues that others have reported. I was able to solve this by listening to the keyup event on the input field, and then checking the event type.
<input type="text" name="field_name" id="field_id" list="fields_list">
<datalist id="fields_list"></datalist>
<script>
var fieldInput = document.getElementById("field_id");
fieldInput.addEventListener('keyup', function(e) { if (isKeyboardEvent(e)) { myFunction(); } });
function isKeyboardEvent(e) {
return (e instanceof KeyboardEvent);
}
function myFunction() {
/* function that does something only on keyboard input */
}
</script>
Actual key strokes will be KeyboardEvent while a datalist option click will be simply be an Event.
Confirmed working in Chrome, Firefox, and Edge.
Related
I need to get the content (text, not value) of the datalist option selected by the user OR some other content written by the user even that content don't match with the content of any options.
And I want to put the content inside a variable.
Thanks.
<input type="text" id="input-color" list="color" autocomplete="off" required >
<datalist id="color">
<option>WHITE</option>
<option>BLACK</option>
<option>BLUE</option>
<option value=" ">(Please, inform some color.)</option>
</datalist>
I'd like a quite simple solution because I am a novice programmer.
You can add an event listener to the input event that detects the input type (option selected or plain input) and then read the value of the element with id "input-color".
Demo:
// add event listener to the input event
window.addEventListener('input', function(e) {
// detect input type (one of input or option selected)
let event = e.inputType ? 'input' : 'option selected';
datalist_value = document.getElementById("input-color").value;
console.log(event, datalist_value);
}, false);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="input-color" list="color" autocomplete="off" required>
<datalist id="color">
<option>WHITE</option>
<option>BLACK</option>
<option>BLUE</option>
<option value=" ">(Please, input some color.)</option>
</datalist>
See also: Perform action when clicking HTML5 datalist option)
I want to display the value in a "select > option" in an based on the location selected from my tag.
Here is the html:
<select name="stateCoord" id="stateCoord" autocomplete="off">
<option selected="selected">SELECT STATE</option>
<option value="lg">Lagos</option>
<option value="abj">Abuja</option>
</select>
<input type="text" name="stateCoordInfo" value="" id="stateCoordInfo" readonly>
And here is the javascript:
$(document).ready(function() {
$("#stateCoord option").filter(function() {
return $(this).val() == $("#stateCoordInfo").val();
}).attr('selected', true);
$("#stateCoord").live("change", function() {
$("#stateCoordInfo").val($(this).find("option:selected").attr("value"));
});
});
I'm still getting the hang on javascript so a detailed explanation won't hurt. Thanks in advance.
If I assume correctly, you want this:
1) initialization of the select option at document ready, that strange thing the code with filter() was trying to do.
2) Capture the change event on the select and show the value of the current selected option on the input. This is what the live() (deprecated) part was trying to do.
$(document).ready(function()
{
$("#stateCoord").val("").change();
$("#stateCoord").change(function()
{
$("#stateCoordInfo").val($(this).val());
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="stateCoord" id="stateCoord">
<option value="" selected>SELECT STATE</option>
<option value="lg">Lagos</option>
<option value="abj">Abuja</option>
</select>
<input type="text" name="stateCoordInfo" value="" id="stateCoordInfo">
$(document).ready(function() {
$("body").on("change","#stateCoord",function() {
$("#stateCoordInfo").val($(this).find("option:selected").val());
});
$("#stateCoord").trigger("change");
});
From what I understand, you want to update the text shown in the readonly text box with the value attribute of the selected option from the dropdown.
To do this, you just need to update the val of your read-only text box to the val of the drop-down whenever change event is fired.
$(document).ready(function() {
$('#stateCoord').change(function(e) {
$('#stateCoordInfo').val($(this).val());
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="stateCoord" id="stateCoord" autocomplete="off">
<option selected="selected">SELECT STATE</option>
<option value="lg">Lagos</option>
<option value="abj">Abuja</option>
</select>
<input type="text" name="stateCoordInfo" value="" id="stateCoordInfo" readonly>
I am not sure, if this is what you need, but I think it should be: JSfiddle
Here is the JS code:
$(document).ready(function() {
$("#stateCoord").change(function() {
var value = $("#stateCoord option:selected").text();
$("#stateCoordInfo").val(value);
});
});
I tried to set readonly attribute to second select2 based on value of first select2 option.
I have my script as below:
<select name="Name" id="Name" style='width:45%'>
<option value="1">disable</option>
<option value="2">enable</option>
</select>
<select name="Name2" id="Name2" style='width:45%'>
<option value="d">David</option>
<option value="b">Bob</option>
</select>
My JS script is to set it is like below:
$(document).ready(function(){
$('#Name,#Name2').select2();
$('#Name').change(function(){
var val = $(this).val();
if(val==1)
{
$('#Name2').attr('readonly','readonly');
}else
{
$('#Name2').removeAttr('readonly');
}
})
})
However, the script above won't be working for select2 option but for textbox is fine. (Fiddlejs)
I tried to search some sources here but it did not help.
Thanks.
The above answers are not going to work with the updated versions of select2,
follow the link for the hack
https://stackoverflow.com/a/55001516/9945426
use .prop() to set disabled or not based on the value
$(document).ready(function() {
$('#Name').change(function() {
var val = $(this).val();
$('#Name2').prop('disabled', val == 1);//prop disabled
}).change();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="Name" id="Name" style='width:45%'>
<option value="1">disable</option>
<option value="2">enable</option>
</select>
<select name="Name2" id="Name2" style='width:45%'>
<option value="d">David</option>
<option value="b">Bob</option>
</select>
Use jQuery .prop() method like this
$('#Name2').prop("disabled", true) for disable and
$('#Name2').prop("disabled", false) for enabling select2.
Here is the (Fiddlejs)
Here is a simple html5 form with two select controls. Changing the selection in the first select generates a new list of options for the second select. Both have the "required" attribute, and an initially selected blank option. The odd bit is that I get a red validation outline around the second select control, without submitting the form. No tool-tip with an error message, just the outline.
<!DOCTYPE html>
<BODY>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
function select_update(srcCtrlId, DstCtrlId)
{
//alert(srcCtrlId+','+DstCtrlId+','+url);
sel1 = document.getElementById(srcCtrlId);
srcValue = sel1.value;
sel2 = document.getElementById(DstCtrlId);
while(sel2.options.length > 0) {
sel2.remove(0);
}
if (srcValue == '')
{
var oOption = new Option( '(no matches)', '', true, true );
sel2.add(oOption);
}
else
{
var oOption = new Option( '-- Select2 --', '', true, true );
sel2.add(oOption);
for(i=1; i<=5; ++i)
{
v = srcValue * 10 + i;
s = 'Select2, Option'+v;
var oOption = new Option( s, v, false, false );
sel2.add(oOption);
}
}
}
function jsValidatePage1()
{
alert('onSubmit');
return false;
return true;
}
</script>
<form onSubmit="return jsValidatePage1();">
<select name="select1" id="select1" size="1" onChange="select_update('select1','select2');" required>
<option value="" selected="selected">-- Select1 --</option>
<option value="1">Select1, Option1</option>
<option value="2">Select1, Option2</option>
<option value="3">Select1, Option3</option>
<option value="4">Select1, Option4</option>
<option value="5">Select1, Option5</option>
</select>
<br><br>
<select name="select2" id="select2" size="1" required>
<option value="" selected="selected">-- Select2 --</option>
<option value='' DISABLED>(empty)</option>
</select>
<br><br>
<select name="select3" id="select3" size="1" required>
<option value="" selected="selected">-- Select3 --</option>
<option value="1">Select3, Option1</option>
<option value="2">Select3, Option2</option>
<option value="3">Select3, Option3</option>
<option value="4">Select3, Option4</option>
<option value="5">Select3, Option5</option>
</select>
<br><br>
<input type="text" name="dummy" value="" required="">
<br><br>
<input type="submit">
</form>
</html>
fiddle here: https://jsfiddle.net/afg57g0u/1/
Run the code, and then select any option in the first select control.
The second lights up red immediately, but the other required controls do not, so it's not validating the whole form, just the second select control (sort-of).
This happens in Firefox 36.0.4. This does not happen on IE 11.0.17, Opera 28.0, Chrome 41.0.2272.101, or Safari 5.1.7 (duh). (on Win8 box)
I can find no other mention online of a similar problem. I have tried numerous approaches to disable or work-around this problem, but no luck.
Does anyone have any ideas? Is this a Firefox bug?
Remove required attribute from select before changing options. Add a mousedown listener to submit button and set the required attribute back on the select then. With id given to submit button:
submit = document.getElementById('submitbtn');
submit.addEventListener('mousedown',function() {
sel2.setAttribute('required',true);
});
working fiddle: https://jsfiddle.net/afg57g0u/2/
note, you should also add a listener for keydown where keycode is the enter button, and touchstart for touch devices. they should call the same function as the mousedown event.
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
}
});