tengo el siguiente problema con un DataList, los datos que dejare aqui seran estaticos, yo uso una base de datos pero en este ejemplo seria asi.
JSFiddle:
https://jsfiddle.net/HeyJuan/pmsdc4ka/
function getExistingValues(dataListId) { // Optiene los valores existentes del datalist
const optionInputs = document.getElementById(dataListId).children;
let values = [];
for (const childrenValue of optionInputs) {
values.push(childrenValue.innerHTML);
}
return values;
}
$(document).ready(function () {
$('#form').submit(e => {
let EXISTING_VALUES = getExistingValues('list');
const inputValue = $('#input').val();
if (EXISTING_VALUES.indexOf(inputValue) == -1) {
e.preventDefault();
alert('El valor del input no existe en la base de datos');
}
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>StackOverflow example</title>
</head>
<body>
<form action="#" id="form">
<input type="text" list="list" id="input">
<datalist id="list">
<option id="op1" value="Internet Explorer" >Navegador Antiguo</option>
<option id="op2" value="Firefox" >Firefox</option>
<option id="op3" value="Chrome" >Chrome</option>
<option id="op4" value="Opera" >Opera</option>
<option id="op5" value="Safari" >Safari</option>
</datalist>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="app.js"></script>
</body>
</html>
Mi problema es el siguiente, en el primer "OPTION" de mi datalist, estoy poniendo como Value: "Internet Explorer" quiero pensar que ese es el valor que estoy enviando por que lo otro lo quiero tener como una descripcion, ya que sale abajo y me interesa mucho esa parte, las otras opciones funcionan correctamente ya que en ambos lugares tienen la misma informacion, espero haberme dado a entender, cualquier duda o pregunta estoy al pendiente,
Gracias.