Value of selected <datalist> item [duplicate] - javascript

This question already has answers here:
Show datalist labels but submit the actual value
(6 answers)
Closed 7 years ago.
I am using a <input type='text'> Element together with a <datalist> to provide user name suggestions for a form. Everything works as expected and all my user show up.
However, when the user submits the form I would like select the right user in my data storage based on the input. Unfortunately, names are not unique and there is a chance for duplicates. To avoid this, all my users have a unique ID that is also part of the <datalist>'s <options> tags.
Is there any way I can read anything else but the input's text value? Is there a reference to the selected datalist element? Can I retrieve a user's id based on the text input?
<input type="text" class="form-control" name="userName" placeholder="Type a user's name" value="" list="user-datalist" required autofocus>
<datalist id="user-datalist">
<option id="53c911ea609252c600632dfe" value="Mr Smith">Mr Smith</option>
<option id="53c911ea60925sdfs4e444eg" value="John Snow">John Snow</option>
<option id="53c911ea6034534535k345th" value="John Snow">John Snow</option>
<option id="53c911ea60925234234234er" value="Mickey Mouse">Mickey Mouse</option>
</datalist>

As you said name are not unique. so i have added a duplicate name to your datalist.
<input type="text" class="form-control" name="userName" placeholder="Type a user's name" value="" list="user-datalist" required autofocus>
<datalist id="user-datalist">
<option id="53c911ea609252c600632dfe" value="Mr Smith">Mr Smith</option>
<option id="53c911ea60925sdfs4e444eg1" value="John Snow">John Snow</option>
<option id="53c911ea60925sdfs4e444eg2" value="John Snow">John Snow</option>
<option id="53c911ea60925234234234er" value="Mickey Mouse">Mickey Mouse</option>
</datalist>
<input type="button" id="sub" value="sub"/>
and getting the id of name
$('#sub').on('click',function(){
var g=$('input[type="text"]').val();
var id = $('#user-datalist').find('option').filter(function() { return $.trim( $(this).text() ) === g; }).attr('id');
alert(id);
});
DEMO

try this (JQuery AutoComplete):
dont forget to reference Jquery.js and JqueryUI.js on your project
HTML
<input id="input_autocomplete" type="text" class="form-control" name="userName" placeholder="Type a user's name" value="" required autofocus>
<datalist id="user-datalist">
<option id="53c911ea609252c600632dfe" value="Mr Smith">Mr Smith</option>
<option id="53c911ea60925sdfs4e444eg" value="John Snow">John Snow</option>
<option id="53c911ea6034534535k345th" value="John Snow">John Snow</option>
<option id="53c911ea60925234234234er" value="Mickey Mouse">Mickey Mouse</option>
</datalist>
JAVASCRIPT AND JQUERY
function GetValues() {
$list = [];
$('#user-datalist').children().each(function () {
var value = $(this).val();
var id = $(this).attr('id');
var item = {
id: id,
value: value
};
$list.push(item);
});
return $list;
}
$(document).ready(function () {
$('#input_autocomplete').autocomplete({
source: GetValues(),
change: function (event, ui) {
alert(ui.item.id)
}
});
});

Related

on key up get selected drop down value not get correct value

I have tried to get the selected dropdown value based on some other input type text field using below code. However every time it gets the first value, i.e 15,
even when I have selected another option.
$(".director_code").keyup(function() { //this is Dropbox class selector
var schoolid = $("#schoolId").children(":selected").val();
// i also tried:
// $('#schoolId').find('option:selected').val();
console.log(schoolid);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="schoolId" id="schoolId" class="form-control schoolId" required="">
<option value="15">a</option>
<option value="16">b</option>
<option value="17">c</option>
<option value="18">d</option>
</select>
<input type="text" name="director_code" id="director_code" class="form-control director_code" pattern="[0-9]+" required="">
in snippet work perfectly but in my project not working well
show img
here i select second option i.e b but its display alert 15
but actual value of b is 16
Your code is working fine and as expected. On keyup event on input field, it is returning the selected option value.
What are you expecting then?
In the below screenshot, see the console log output w.r.t. input keyup logged with time.
You should try this
$("#schoolId").change(function(){
var selectedVal = $(this).children("option:selected").val();
$('#director_code').val(selectedVal)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="schoolId" id="schoolId" class="form-control schoolId" required="">
<option value="15">a</option>
<option value="16">b</option>
<option value="17">c</option>
<option value="18">d</option>
</select>
<input type="text" name="director_code" id="director_code" class="form-control director_code" pattern="[0-9]+" required="">
Based on your question maybe you want like this please check and let me know if something missed.
$(".director_code").keyup(function() {
try
{
var value = $(this).val();
//$("#schoolId").val($(this).val());
var oschoolId = $('#schoolId > option').filter(function () { return $.trim($(this).text()) == $.trim(value) }).val();
if(oschoolId!=undefined)
{
$('#schoolId').val(oschoolId);
console.log(oschoolId);
console.log($(this).val());
}
}catch(e)
{
console.log("Error: "+e.message);
}
});
$("#schoolId").change(function(){
var value= $(this).children("option:selected").text();
$('#director_code').val(value)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="schoolId" id="schoolId" class="form-control schoolId" required="">
<option value="15">a</option>
<option value="16">b</option>
<option value="17">c</option>
<option value="18">d</option>
</select>
<input type="text" name="director_code" id="director_code" class="form-control director_code" pattern="[0-9]+" required="">

Javascript issue with selector session storage

Hello so I added some javascript to keep selection stored when page is reloaded in my select menu , but the issue is when I load the page for the first time nothing appears in my select menu (First choice of the select menu)
what appears
window.onload = function() {
var selItem = sessionStorage.getItem("SelItem");
$('#date').val(selItem);
}
$('#date').change(function() {
var selVal = $(this).val();
sessionStorage.setItem("SelItem", selVal);
});
<label class="op" for="date">Periode : </label>
<select id="date">
<option value="toutes">Toutes</option>
<option value="2019">Année en cours</option>
<option value="2018">Année pécédente</option>
<option value="2017">Année -2</option>
<option value="2016">Année -3</option>
<option value="2015">Année -4</option>
</select>
<br/><br/>
<input type="hidden" name="date" id="date1" class="datepicker w100" value="2015-01-01"type="date" placeholder="Du jj/mm/aaaa"> <input type ="hidden"name="date2" id="date2" value="2026-12-31"class="datepicker w100" type="date" placeholder="Au jj/mm/aaaa">
<br/>
So only set the value if there is something in storage.
if (selItem) $('#date').val(selItem);

How can i add country phone number in phone field by selecting countries by separate option list

i want to add a country code phone to a separate phone field in a from. E.g. ich selcet "Austria" in an option field and after selectiong the code "+41" should appera in the phone field.
This works fine with using the values BUT the values should not be changed to numbers or country name + code.. so my question ist to read the id (or anoter attribute) and place this value to the phone field...
<script language="javascript" type="text/javascript">
$('#country').change(function () {
var countryCode = $(this).val();
if (countryCode) {
$('#phone').val(countryCode);
}
});
</script>
<select name="country" id="country">
<option value="">Country...</option>
<option value="Belgium" id="+42">Belgien</option>
<option value="Bulgaria" id="+47">Bulgarien</option>
<option value="Croatia" id="+12">Kroatien</option>
<option value="Czech Republic" id="+28">Tschechien</option>
</select>
<br /><br />
<!-- <label for="phone">Phone Number</label>
<input id="phone" name="phone" placeholder="user's number " required="" type="number"> <br><br>
-->
I would recommend you to add a new span element or any tag that will hold your country code and which is not editable. Since, the country code is being selected from the dropdown you can make that code static in span. Also, the another reason is your phone number is a number type input so it will be easy to separate out the country code with + and allow user to add their phone number in the input. Now, when you submit the form or save this value to backend then at that time simply get the country code value and phone number to pass them to backend and save accordingly.
$('#country').change(function () {
var countryCode = $('#country option:selected').attr('id');
if (countryCode) {
$('#countryCode').text(countryCode);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="country" id="country">
<option value="">Country...</option>
<option value="Belgium" id="+42">Belgien</option>
<option value="Bulgaria" id="+47">Bulgarien</option>
<option value="Croatia" id="+12">Kroatien</option>
<option value="Czech Republic" id="+28">Tschechien</option>
</select>
<br /><br />
<label for="phone">Phone Number</label>
<span id='countryCode'></span>
<input id="phone" name="phone" placeholder="user's number " required="" type="number"> <br><br>

textbox values on change

I have three textboxes with the same id's in a table. I also have one dropdown on top of the table. While changing the dropdown I need to set the textbox values as same as the dropdown value.
I used the following code and I am able to change only the first textbox, others are not getting values.
function myHome() {
var zoneId = $("#funderIds").val();
$("#funder").val($("#funderIds").val());
}
<select id="funderIds" name="funderIds" onchange="myHome()" style="width: 25%;">
<option value="0">--Select--</option>
<option value="3">option1</option>
<option value="5">option2</option>
<option value="6">option3</option>
</select>
<input type="text" name="funder" id="funder" value="">
<input type="text" name="funder" id="funder" value="">
<input type="text" name="funder" id="funder" value="">
Can anyone give some advise on where I am making a mistake?
It is invalid to use same ID for more than one element, it should be unique throughout the document, thus use class instead!
ID's are unique
Each element can have only one ID
Each page can have only one element with that ID
Classes are NOT unique
You can use the same class on multiple elements.
You can use multiple classes on the same element.
Change your code to:
function myHome() {
var zoneId = $("#funderIds").val();
$(".funder").val($("#funderIds").val());
}
<select id="funderIds" name="funderIds" onchange="myHome()" style="width:25%;">
<option value="0">--Select--</option>
<option value="3">option1</option>
<option value="5">option2</option>
<option value="6">option3</option>
</select>
<input type="text" name="funder-1" id="funder-1" class="funder" value="">
<input type="text" name="funder-2" id="funder-2" class="funder" value="">
<input type="text" name="funder-3" id="funder-3" class="funder" value="">
Id has to be unique, try name instead with min changes:
function myHome() {
var zoneId = $("#funderIds").val();
$("input[name=funder]").val(zoneId);
}
Edited:
To get option text, use :selected:
function myHome() {
var zoneId = $("#funderIds option:selected").text();
$("input[name=funder]").val(zoneId);
}
IDs are unique identifier,they should always be unique. If you have multiple elements with same ID, ID selector ($(".funder") in your case) will return the object of first element only.
You can rather use same class and use class selector to target all the element.
HTML:
<input type="text" name="funder" class="funder" value="">
<input type="text" name="funder" class="funder" value="">
<input type="text" name="funder" class="funder" value="">
JS:
function myHome() {
var zoneId = $("#funderIds").val();
$(".funder").val(zoneId );
}
function myHome() {
var zoneId = $("#funderIds").val();
$(".funder").val(zoneId);
}
<select id="funderIds" name="funderIds" onchange="myHome()" style="width:25%;">
<option value="0">--Select--</option>
<option value="3">option1</option>
<option value="5">option2</option>
<option value="6">option3</option>

javascript change onblur value

I have 2 selections and a textbox. I want to change the onBlur value of the textbox when i select one of the selections. Here is my code:
function changeBlurValue(){
$selection = document.getElementById("searchtype")
$onblurvalue= document.getElementById("searchbox")
if ($selection.value="location"){
$onblurvalue.value="Enter a location name";
};
}
//html
<select name= "searchtype" id="searchtype" onclick="changeBlurValue()">
<option value="gymname">Gym Name
<option value="location">Location
</select><br><br>
<input name="searchterm" type="text" size="39" style="color:#888;" id="searchbox"
value="Enter a gym name" onfocus="inputFocus(this)" onblur="inputBlur(this)" />
The problem is that the selection is permanent at "Location" and I can't change it to "Gym Name"
Thanks for the help.
The problem lies here:
if ($selection.value="location"){
You should change it to
if ($selection.value=="location"){
because you are making a comparision.
I would try using onChange instead of onClick for your select.
<select name= "searchtype" id="searchtype" onchange="changeBlurValue()">
Also close your <option> tags, as such:
<select name= "searchtype" id="searchtype" onchange="changeBlurValue()">
<option value="gymname">Gym Name</option>
<option value="location">Location</option>
</select>

Categories