Please advise. Your help would be greatly appreciated. I have a datalist provided, I need to get and display a text value when a user selected or entered.
For sample code below: when user selected any country, it works fine. But I need to handle when a user enter a country that is NOT in the list (for example: "Canada"), I need to display: "Canada" is not in the country list yet.
<body>
Please Select Country:
<input type="text" list="countries" name="countryName" id="countryId" />
<datalist id="countries">
<option value="India">India</option>
<option value="United States"></option>
<option value="United Kingdom"></option>
<option value="China"></option>
<option value="Nepal"></option>
<option value="Afghanistan"></option>
<option value="Iceland"></option>
<option value="Indonesia"></option>
<option value="Iraq"></option>
<option value="Ireland"></option>
<option value="Israel"></option>
<option value="Italy"></option>
<option value="Poland"></option>
</datalist>
</body>
I have tried (a code below) to enter a value not in the list (e.g: Canada), it always empty when display:
$("#countryId").on("change", function () {
//var result = $(this).val();
var country = document.getElementById('countryId').value
alert( country + " is not in the country list yet." );
}});
Thank you very much in advantage.
I retried and the document.getElementById('countryId').value actually was working!!
I got the text input (not in the datalist) displayed !.... I didn't know what I missed before..... but it works now.