0
150
ViewsCómo mostrar el elemento seleccionado en la misma pantalla después de que el usuario envíe el formulario
Estoy tratando de mostrar el elemento seleccionado en la misma pantalla después de que el usuario envíe el formulario. El problema es cuando uso type="button" para el botón en lugar de type="submit", entonces el atributo requerido no está marcado. ¿Hay alguna manera de mostrar los elementos seleccionados después de que se envía el formulario y el atributo requerido también se verifica usando JavaScript?
Suponga que cuando presiona el botón enviar sin marcar ningún botón de radio, se muestra un error debido al atributo requerido, y cuando el usuario marca cualquiera de las opciones, luego de presionar el botón enviar, el valor se muestra junto a las entradas.
1 answers
Answer question0
Puede
e.preventDefault()en su controlador onSubmit para evitar que la página predeterminada se vuelva a cargar al enviar el formulario.Luego use el objeto FormData para obtener el valor que necesita.
const form = document.querySelector('#form') form.onsubmit = (e) => { e.preventDefault() const data = new FormData(e.target); document.querySelector('#output').innerHTML = data.get('drone') } <form id='form'> <fieldset> <legend>Select a maintenance drone:</legend> <div> <input type="radio" id="huey" name="drone" value="huey" required> <label for="huey">Huey</label> </div> <div> <input type="radio" id="dewey" name="drone" value="dewey"> <label for="dewey">Dewey</label> </div> <div> <input type="radio" id="louie" name="drone" value="louie"> <label for="louie">Louie</label> </div> </fieldset> <button type='submit'>Submit</button> </form> <div id="output"/>