CODEWITHSUNDEEP
jqueryhtmlhtml-datalist
ken4ward
ken4ward

Reputation: 2296

Get selected value in datalist using jQuery

Very simple and straight forward. I pre-populated a HTML datalist with values, on the form when I want select a value and insert it into SQLite database. This is my example code which is not working. Please help out. HTML5 datalist form creation:

<input  name="TypeList" list="TypeList" placeholder="Select Type"/>
<datalist id="TypeList">
    <option value="State">
    <option value="Area">
    <option value="Town">
    <option value="Street">
    <option value="Number">
    <option value="Local Government">
    <option value="Ward">
    <option value="Country">
</datalist>

this is the sample jquery code that did not work:

var relationshipTemp = $('#TypeList option:selected').text();

Upvotes: 13

Views: 81613

Answers (11)

Md Abdur Rahman Chowdhury
Md Abdur Rahman Chowdhury

Reputation: 151

You just give a id to datalist. And in script, you can get the value like velow:

var ddl = $('[name="TypeList"]').val();

Upvotes: 0

Saad Razi
Saad Razi

Reputation: 26

var relationshipTemp = null;
$('input[name=TypeList]').change(function(){
    // YOU CAN PERFORM LOGIC HERE OR CAN SAVE THE VALUE IN ANY VARIABLE
    relationshipTemp = $(this).val();    
});

Upvotes: 0

Vijai Sebastian
Vijai Sebastian

Reputation: 117

The easy way is to get the name of datalist using it's name attribute and then use val() function to see the value selected

$('[name="TypeList"]').val();

Check the working example https://jsfiddle.net/ch9uwvod/8/

Upvotes: 4

cslotty
cslotty

Reputation: 1797

You simply give your input an ID and then use the input's val() like so:

HTML:

<input id="typeInput" name="TypeList" list="TypeList" placeholder="Select Type"/>

JS:

$('#typeInput').val();

Upvotes: 1

HARSHVARDHAN RAJPUROHIT
HARSHVARDHAN RAJPUROHIT

Reputation: 1

<input list="Model" id="ModelList" placeholder="Select Model"> 
<datalist id="Model">
<option value="A">
<option value="B">
<option value="C">
<option value="D">
</datalist>
<script>
var dataset= document.getElementById("ModelList").value;
alert(dataset);</script>

Upvotes: 0

Young
Young

Reputation: 979

Try this.

$('#id_relative option[datalisted=datalisted]').val()

Upvotes: 3

DINESH Kumar SISODIYA
DINESH Kumar SISODIYA

Reputation: 21

simple solution to this problem is do it as you get the value from an text input field

Name: 

<input id="l" list="bloodgroup" name="blood_group" placeholder="Blood group">
                    <datalist id="bloodgroup">
                        <option value="A+"> 
                        <option value="B+"> 
                        <option value="AB+"> 
                        <option value="O+"> 
                        <option value="A-"> 
                        <option value="B-"> 
                        <option value="AB-"> 
                        <option value="O-">
                    </datalist>

<button type="button" onclick="myFunction()">Try it</button>



<script>
function myFunction() {
    console.log(document.getElementById("l").value);
}
</script>

Upvotes: -2

Pazza22
Pazza22

Reputation: 564

Have a selector to select the input element. Mention the event after which you want the values to be moved. Get the value by using .val().

Example:

$("input[name=TypeList]").focusout(function(){
    alert($(this).val());
});

Hope this is what you are looking for jsFiddle

Upvotes: 22

Stephan Muller
Stephan Muller

Reputation: 27600

:selected does not work on datalist options, as one datalist can provide suggestions for multiple inputs. If two different inputs contain two different suggestions from the list, which would be the selected one?

As mentioned in other comments, you can check the value of the input on change like so:

$("input[name='Typelist']").on('input', function(e){
    var selected = $(this).val();
});

However, if you want to make sure that the value is actually one of the options from the datalist you'll have to do an extra check, as with a datalist visitors can still input different values in the input. Datalist merely offers suggestions.

A solution to check if the value is in the datalist:

$("input[name='Typelist']").on('input', function(e){
   var $input = $(this),
       val = $input.val();
       list = $input.attr('list'),
       match = $('#'+list + ' option').filter(function() {
           return ($(this).val() === val);
       });

    if(match.length > 0) {
        // value is in list
    } else {
        // value is not in list
    }
});

Upvotes: 14

Christian
Christian

Reputation: 799

I would use '.on()':

HTML

<input type="text" name="display" id="display" value="" list="list-display" />
<datalist id="list-display">
 <option>Name</option>
 <option>Id</option>
</datalist>

Javascript 

$("#display").on('input',function(e){
 alert($(this).val());
});

Upvotes: 2

presidentnickson
presidentnickson

Reputation: 1085

try .val() instead :

var relationshipTemp = $('#TypeList option:selected').val();

Upvotes: 1

Related Questions