CODEWITHSUNDEEP
javascripthtmlhtml-datalist
Tapan
Tapan

Reputation: 21

Script validation required on data list option

<form action="order.php" method="post" name="myForm" id="dropdown" onsubmit="return(validate());">
    <input list="From" name="From" autocomplete="off" type="text" placeholder="From Place">
    <datalist id="From">
        <option value="Stand">
        <option value="Hospital">
    </datalist>
</form>

Script Validation :

<script>
    if (document.myForm.From.value == "") {
        alert("Please select From Place.!");
        return false;
    }
</script>

If null then given me the error message :

Please select From Place.!

User's input is also printing... But i need Option Value to print only ie. "Stand","Hospital"...
I have also deleted type="text" but it didn't change anything.

Upvotes: 0

Views: 2534

Answers (1)

tektiv
tektiv

Reputation: 14187

You need to loop inside your datalist options when submiting :

HTML

<form>
    <input list="datalist" id="input"> 
    <datalist id="datalist"> 
        <option value="Internet Explorer">
        <option value="Firefox">
        <option value="Chrome">
        <option value="Opera">
        <option value="Safari">
  </datalist>
</form>

<button onclick="myFunction()">Check</button>

<p id="result"></p>

JS

function myFunction() {
    var options = document.getElementById("datalist").options;
    var result = false;

    for (var i = 0; i < options.length; i++) {
        if(document.getElementById("input").value == options[i].value) {
        result = true;
      }
    }

    document.getElementById("result").innerHTML = "Validate : " + result + ".";
}

Then you can use the Boolean for your validation.

You can see the result on this fiddle.

Upvotes: 1

Related Questions