Tengo una situación en la que quiero permitir que un usuario decida los títulos de los libros que tengo en mi base de datos, usando una entrada con una lista de datos (generada por php), después de que el usuario elija un título, haría clic en el botón Enviar y el formulario Enviaría el título en otro archivo.
Todo funcionó bien, pero no me di cuenta de que necesitaba enviar la identificación del libro que el usuario seleccionó, porque puede haber más de un libro con el mismo título.
Lo que me gustaría tener es la opción de la lista de datos, que ya no tiene el título del libro dentro de su atributo "valor", pero quiero ese título dentro de su HTML interno, para que se muestre el título, mientras tiene la ID dentro el atributo "valor". Mi problema es que si hago eso, cuando el usuario hace clic en la opción de lista de datos, la ID se introduce en la entrada de texto, por lo que es posible que el usuario no sepa qué libro elige.
resumiendo: me gustaría tener la lista de datos que muestra el título, cuando se elige una opción, ese título se muestra en la entrada de texto, cuando envío, la identificación del libro se envía en "FindBook.php" dentro de $_POST .
isIn() verifica si el título está dentro de la matriz de títulos, necesitaría cambiar eso para que pueda verificar si la ID está dentro de la matriz de ID.
<form onsubmit="alert(document.getElementById('number').value);" action="FindBook.php" target="_blank" method="POST"> <input id="number" list="BooksById"> <input type="submit" value="Find"> </form> <datalist id="BooksById"> <option value="1">Title1</option> <option value="2">Title2</option> <option value="3">Title3</option> <option value="4">Title4</option> </datalist> <br> <form onsubmit="alert(document.getElementById('string').value);" action="FindBook.php" target="_blank" method="POST"> <input id="string" list="booksByTitle"> <input type="submit" value="Find"> </form> <datalist id="booksByTitle"> <option value="Title1"></option> <option value="Title2"></option> <option value="Title3"></option> <option value="Title4"></option> </datalist>Como no entiendo jQuery, realmente preferiría una solución que no implique eso.
Creo que en tu caso debes usar una etiqueta <select> en lugar de una <datalist> porque no quieres que el usuario final ingrese nuevos nombres (¿o sí?). Sin embargo, puede trabajar con los atributos de datos como en el siguiente código:
HTML:
<input list="titles" id="title-input" oninput="getBookId()"> <datalist id="titles"> <option data-value="5" value="A book name"> </datalist>JavaScript:
function getBookId() { var selectedTitle = document.getElementById("title-input").value; var value2send = document.querySelector(`#titles option[value='${selectedTitle}']`).dataset.value; // Here now you have the book title id. console.log("getBookId ~ value2send", value2send) }Espero que te funcione.
Suponiendo que puede proporcionar valores de título distintos para cada opción de lista de datos...
Agregue un atributo de conjunto de datos, como data-id , a los elementos de opción de su lista de datos, que contenga la identificación correspondiente, y agregue una entrada de tipo hidden a su formulario. Luego use la función de controlador de eventos onsubmit para obtener el valor de id del conjunto de datos de la opción de lista de datos seleccionada y asígnelo al valor de la entrada oculta:
function findBook(form) { form.bookid.value = document.querySelector(`datalist option[value="${form.booktitle.value}"]`).dataset.id; console.log(form.bookid.value); return false; } <form onsubmit="return findBook(this)"> <input type="hidden" name="bookid"> <input name="booktitle" list="BooksById"> <input type="submit" value="Find"> </form> <datalist id="BooksById"> <option data-id="1" value="Title1"> <option data-id="2" value="Title2"> <option data-id="3" value="Title3"> <option data-id="4" value="Title4"> </datalist> Al enviar el formulario, su archivo PHP tendrá disponibles las variables $_POST['bookid'] y $_POST['booktitle'] .