Parece que no puedo hacer que esto funcione. Principiante aquí. Quiero mostrar en la consola los valores de nombre y apellido. html
`<form id="form1" onsubmit="getFormValue()"> First name: <input type="text" name="fname" value="David" /><br /> Last name: <input type="text" name="lname" value="Beckham" /><br /> <input type="submit" value="Submit" /> </form>``js
`function getFormValue() { const firstName = document.getElementsByName("fname").value; const lastName = document.getElementsByName("lname").value; console.log(firstName + lastName); }`No aparece nada en la Consola. Gracias
Un mejor enfoque sería agregar un controlador de eventos en lugar de usar una función en línea. Hay suficientes recursos para guiarlo en eso, por lo que no lo abordaré aquí. La respuesta a continuación aborda su pregunta específica.
Para comenzar, debe pasar el event y evitar que el navegador ejecute el envío del formulario utilizando la función preventDefault . También debe usar getElementById en lugar de getElementsByName . getElementsByName devuelve una lista de NodeList en lugar del elemento en sí.
He agregado un ejemplo de trabajo a continuación. No recomiendo el enfoque, sin embargo, lo estoy agregando como un ejemplo de trabajo mínimo para responder a su pregunta.
<html> <body> <form id="form1" onsubmit="getFormValue(event)"> First name: <input type="text" id="fname" name="fname" value="David" /><br /> Last name: <input type="text" id="lname" name="lname" value="Beckham" /><br /> <input type="submit" value="Submit" /> </form> <script> function getFormValue(e) { e.preventDefault(); const firstName = document.getElementById("fname").value; const lastName = document.getElementById("lname").value; console.log(firstName + lastName); } </script> </body>Revisa el siguiente código
function getFormValue(ev) { // DISABLE DEFAULT FORM SUBMIT ACTION ev.preventDefault(); // PICK THE FORM REFERENCE const form = document.getElementById('form1'); // GET ALL ELMENTS LIKE INPUT AND SELECT, YOU CAN ADD MANY MORE const allInputs = form.querySelectorAll('input,select'); let formObj = {}; // GET THE VALUES OF EACH FIELD allInputs.forEach(e => { // ALL KEY DEPENDS ON THE NAME IN THE ELEMENT const key = e.getAttribute('name'); if(key){ formObj[key] = e.value; } }); console.log(formObj); }