Estoy haciendo un filtro en PHP, pero necesito javascript para completar el formulario después de presionar el botón Enviar (para que las personas vean lo que ingresaron en el formulario).
Para hacerlo, hice esto:
<form method="post"> <div style="display:flex;margin-top:20px;"> <input name="surfMin" id="surfMin" type="text" style="height: 35px;width: calc(100%/3);" placeholder="min surface"> <input name="surfMax" id="surfMax" type="text" style="height: 35px;width: calc(100%/3);" placeholder="max surface"> <input name="prix" id="prix" type="text" style="height: 35px;width: calc(100%/3);" placeholder="price"> </div> <div style="width:100%;margin-top:30px;text-align: center;"> <input id="button" style="width: 25%;height: 35px;background: #dc3545;color:white;" type="submit" name="search" /> </div></form> if (isset($_POST['surfMin'])) print " <script> document.getElementById('surfMin').value = '" . $_POST['surfMin'] . "' </script>"; if (isset($_POST['surfMax'])) print " <script> document.getElementById('surfMax').value = '" . $_POST['surfMax'] . "' </script>"; if (isset($_POST['prix'])) print " <script> document.getElementById('prix').value = '" . $_POST['prix'] . "' </script>";Este código funciona perfectamente, excepto si intento volver a completar nuevos valores en el formulario. Los últimos valores permanecieron. Quiero eliminar todos los valores si hacemos clic en cualquier entrada para poder rellenarla.
¿Cómo puedo hacerlo?
Estoy editando mi respuesta, porque finalmente entiendo tu pregunta.
Desea que los valores del formulario aún se muestren incluso después de que se haya enviado el formulario, PERO una vez que se haya enviado, desea que el próximo intento de edición borre todos sus datos.
Aquí está su solución:
<form> <input name="name" /> <input name="email" /> <button type="submit">Submit</button> </form> <script> const form = document.querySelector('form'); const inputs = form.querySelectorAll('input'); // Add event listener for once the form is submitted form.addEventListener('submit', (e) => { e.preventDefault(); // Once submitted, add event listener to the form for the next edit function onKeyUp({ target }) { // Grab character user typed so it's not lost const char = target.value[target.value.length - 1]; // Clear out all the form inputs [...inputs].forEach((input) => (input.value = '')); // Put the typed character back in its place target.value = char; // Remove this event listener now form.removeEventListener('keyup', onKeyUp); } form.addEventListener('keyup', onKeyUp); }); </script> Además, tal vez podría ayudarlo, pero puede obtener un objeto limpio y agradable con todas las entradas de su formulario en formato de objeto (siempre que cada entrada tenga un atributo de name ) usando FormData :
<form> <input name="name" /> <input name="email" /> <button type="submit">Submit</button> </form> <script> const form = document.querySelector('form'); const inputs = form.querySelectorAll('input'); // Add event listener for once the form is submitted form.addEventListener('submit', (e) => { e.preventDefault(); const jsonFormData = Object.fromEntries([...new FormData(e.target)]); console.log(jsonFormData); }); </script>Puedes usar
document.getElementById("myForm").reset();Simplemente agregue un botón de reinicio después del botón de enviar
<input type="reset" value="Reset form" />Por cierto, tu código es vulnerable a XSS.