0

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.

3
  • Tu problema es que estas poniendo como Value: "Internet Explorer"? Commented el 13 nov. 2020 a las 19:32
  • Si tu ejecutas el programa se supone que seleccionas "Internet Explorer" y el input se llena con esa informacion, pero si das enter te dice que el navegador "no existe en la base de datos" por que supongo que esta enviando el dato "navegador antiguo", ese es mi problema, como hacer para que envie el dato "Internet explorer" pero quiero seguir teniendo como esa "descripcion" pequena abajo en letras pequenas en el datalsit
    – EduardoMX
    Commented el 13 nov. 2020 a las 20:50
  • Al final de cuentas lo que quiero es que no se pueda enviar algo que no esta en el datalist que traigo de la base de datos, por que despues pueden escribirme cualquier cosa
    – EduardoMX
    Commented el 13 nov. 2020 a las 21:01

1 respuesta 1

0

Solamente valida el resultado del input con los values del datalist, lo estoy seleccionando con JQuery para tomar el value y si es que hay me retorna un valor, si no, me retorna vacio, entonces con esto validas en el submit

let datalist_val = $("#list option[value='"+inputValue+"']").text();
if ( datalist_val === '' ) { alert ('No esta este valor en el datalist') }

Codigo completo:

$(document).ready(function () {
    $('#form').submit(e => {
        const inputValue = $('#input').val();
        let datalist_val = $("#list option[value='"+inputValue+"']").text();
        if ( datalist_val === '' ) {
        e.preventDefault();
            alert('No esta este valor en el datalist');
        }
    });
});
<!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" autocomplete="off">
        <input type="text" list="list" id="input">
        <datalist id="list">
            <option id="op1" value="Internet Explorer" >Internet</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>

2
  • Muchas gracias bro, ya lo puse con la base de datos y todo bien.
    – EduardoMX
    Commented el 13 nov. 2020 a las 21:49
  • Se me olvido quitar la funcion getExistingValues ya que con lo otro, no es necesaria usarla @EduardoMX Commented el 14 nov. 2020 a las 12:44

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.