The list attribute / datalist element of HTML5 forms shows a dropdown menu of choices one can pick from, edit, and even type in some text. All this can be achieved at once with a clean and powerful code:
<input list="states">
<datalist id="states">
<option value="One">
<option value="Two">
</datalist>
However, how to make such a form send a value which is different from the option text, as in the usual select / option (below)?
<select>
<option value="1">One</option>
<option value="2">Two</option>
</select>
Seems you can't with pure HTML without using some JS+CSS help.
try this i hope its help you.
html
<input id="datalisttestinput" list="stuff" ></input>
<datalist id="stuff">
<option id="3" value="Collin" >
<option id="5" value="Carl">
<option id="1" value="Amy" >
<option id="2" value="Kristal">
</datalist>
script
function GetValue() {
var x = $('#datalisttestinput').val();
var z = $('#stuff');
var val = $(z).find('option[value="' + x + '"]');
var endval = val.attr('id');
alert(endval);
}
Best Wishes
Kumar
Below is Kumah's modified answer that uses a hidden field to contain the value which ultimately gets sent to the server.
$('#inputStates').change(function(){
var c = $('#inputStates').val();
$('#inputStates').val(getTextValue());
$('#statesHidden').val(c);
});
function getTextValue(){
var val = $('#inputStates').val();
var states = $('#states');
var endVal = $(states).find('option[value="' + val + '"]');
//depending on your logic, if endVal is empty it means the value wasn't found in the datalist, you can take some action here
return endVal.text();
}
Related
I need a Dropdown list with others option which allows us to add value manually if the user's field is not in a dropdown list. is it possible?
Thanks in advance,
Balaji
Even though it is a duplicated question, let me give you a direct method using plain JavaScript and HTML. Check and let me know
function myFunction() {
var x = document.getElementById("mySelect").value;
var input = document.getElementById("others-text");
if (x === "others") {
input.style.display = "block";
} else {
input.style.display = "none";
}
}
<div>
<select name="select" id="mySelect" onchange="myFunction()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="others">Others</option>
</select>
<input
style="display: none"
type="text"
name=""
id="others-text"
placeholder="User Input"
/>
</div>
I'am searching something similar to datalist in html. While I'm typing something in html input it shows me similar titles in database. When i type something more, ajax show me better matching titles to my text. And i have this ajax script but my question is here: How can I present this titles under the input text?
I saw on google it's only ul and li tags, and it's all ?
google search example
But on w3schools example we can see propably better solution.
Which one is better ? Or if you know other techniques please tell me about it. Don't know which one to use in my search tool.
I think i find the solution by the comment with helpful link, don't remember who is it because he delete his comment.
By this link i started to seraching datalist and found article:
blog link
And here we have some phrases about datalist and very useful example:
<div id="page-wrapper">
<h1>Datalist Element Demo</h1>
<label for="default">Pick a programming language</label>
<input type="text" id="default" list="languages" placeholder="e.g. JavaScript">
<datalist id="languages">
<option value="HTML">
<option value="CSS">
<option value="JavaScript">
<option value="Java">
<option value="Ruby">
<option value="PHP">
<option value="Go">
<option value="Erlang">
<option value="Python">
<option value="C">
<option value="C#">
<option value="C++">
</datalist>
<label for="ajax">Pick an HTML Element (options loaded using AJAX)</label>
<input type="text" id="ajax" list="json-datalist" placeholder="e.g. datalist">
<datalist id="json-datalist"></datalist>
</div>
<script>
// Get the <datalist> and <input> elements.
var dataList = document.getElementById('json-datalist');
var input = document.getElementById('ajax');
// Create a new XMLHttpRequest.
var request = new XMLHttpRequest();
// Handle state changes for the request.
request.onreadystatechange = function(response) {
if (request.readyState === 4) {
if (request.status === 200) {
// Parse the JSON
var jsonOptions = JSON.parse(request.responseText);
// Loop over the JSON array.
jsonOptions.forEach(function(item) {
// Create a new <option> element.
var option = document.createElement('option');
// Set the value using the item in the JSON array.
option.value = item;
// Add the <option> element to the <datalist>.
dataList.appendChild(option);
});
// Update the placeholder text.
input.placeholder = "e.g. datalist";
} else {
// An error occured :(
input.placeholder = "Couldn't load datalist options :(";
}
}
};
// Update the placeholder text.
input.placeholder = "Loading options...";
// Set up and make the request.
request.open('GET', 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/4621/html-elements.json', true);
request.send();
</script>
I get this from codepen link in article. Pen created by Matt West.
I have a select input with an option called "custom". So when the user selects "custom" from the list the value needs to be that of a corresponding text input box.
<select id="choice" >
<option value="">custom</option>
<option value="1">A</option>
<option value="2">B</option>
</select>
<input id="custom_choice" />
The "custom" text doesn't need to change, just the value for when the data from the form is collected.
Any ideas?
Thanks
Here you go,
HTML
<select id="choice" onChange="javaScript:getIt(this)">
<option value="">custom</option>
<option value="1">A</option>
<option value="2">B</option>
</select>
<input id="custom_choice" />
JavaScript
getIt = function(obj) {
var val = document.getElementById("choice").value;
//If you want to get value then user above line.
var innerhtml = obj.options[obj.selectedIndex].text;
document.getElementById("custom_choice").value = innerhtml;
}
FIDDLE
JavaScript would work best for this, something like this:
Bear in mind these would be two separate files:
var choice = document.getElementById("choice");
var custom_choice = document.getElementById("custom_choice").innerHTML = choice;
I think this may work but you would have to check it.
this is probably a very basic question, but I can't seem to figure it out.
In the code below you can see that I have a select-option block. It works fine. The only problem is that when I select one of the options (and get redirected to the corresponding page), the tick remains at the default value ("Sort...") of the select-option function.
<select name="sort" onchange="location = this.options[this.selectedIndex].value;">
<option value="">Sort...</option>
<option value="index.php?ascending=true">Preis aufsteigend</option>
<option value="index.php?descending=true">Preis absteigend</option>
</select>
When a user selects "Preis aufsteigend", I would like the tick to be displayed at the corresponding option in the field...
Can anybody help?
Thanks in advance!
You need to reverse your onchange function. On page load look for the url variable you set then select the appropriate option.
Script
var sel = document.getElementById('sort');
var opts = sel.options;
for(var opt, j = 0; opt = opts[j]; j++) {
if(window.location.search.indexOf(opt.value.split('?')[1]) > -1 ) {
sel.selectedIndex = j;
break;
}
}
HTML
<select id="sort" name="sort" onchange="location = this.options[this.selectedIndex].value;">
<option value="">Sort...</option>
<option value="index.php?ascending=true">Preis aufsteigend</option>
<option value="index.php?descending=true">Preis absteigend</option>
</select>
http://jsfiddle.net/t95wqm48/
I need help with this simple thing. I have a multiple selection input box and I want to get the values of the selected parameter using javascript. The problem is, that when I use:
x=document.form.box.value;
The form looks like this:
<form name="form">
<select name="box" multiple>
<option value="a">A</option>
<option value="b">B</option>
</select>
</form>
I always get just the first selected option. I need to get the values of all selected options as a string, ideally separated by commas. If I for example choose A, I get A, if B, I get B, but when I choose A and B, I get A again.
Any ideas?
First give your select box and ID, this will make it accessible via standard calls:
<select name="box" id="box" multiple>
<option value="a">A</option>
<option value="b">B</option>
</select>
Then you can loop thru individual options, appending only selected ones:
var sel = document.getElementById("box")
var sResult = "";
for (var i = 0; i < sel.options.length; i++) {
if (sel.options[i].selected){
sResult += sel.options[i].value + ','
}
}
if (sResult.length > 1) sResult = sResult.substring(0,sResult.length-1);
Working example: http://jsfiddle.net/LGCY6/2/