Tengo múltiples formularios en un div. Me gustaría obtener los valores de cada formulario como una matriz de objetos con un solo clic.
<form data-category="1"> <div class="form-group"> <label for="usr">First Name:</label> <input type="text" class="form-control" id="usr" name="username" /> </div> <div class="form-group"> <label for="pwd">Last Name:</label> <input type="text" class="form-control" id="pwd" name="lname" /> </div> </form> <form data-category="2"> <div class="form-group"> <label for="usr">Name:</label> <input type="text" class="form-control" id="usr" name="username" /> </div> <div class="form-group"> <label for="usr">Age:</label> <input type="number" class="form-control" id="usr" name="age" /> </div> <div> <p>Gender></p> <div class="form-check"> <label class="form-check-label"> <input type="radio" class="form-check-input" name="optradio" />Male </label> </div> <div class="form-check"> <label class="form-check-label"> <input type="radio" class="form-check-input" name="optradio" />Female </label> </div> </div> </form> <button type="submit" class="btn btn-primary">Submit</button>Me gustaría obtener el resultado donde el objeto exh tiene una clave llamada formulario cuyo valor es el número de formulario y la otra clave llamada datos de entrada que es un objeto cuyas claves representan los números de entrada y el valor son valores de entrada:
[{ form:1, inputdata:{1:"John",2:"John Doe"} }, { form:2, inputdata:{1:"Jane",2:25,3:"female"} }]Probablemente puedas hacer lo siguiente:
Otra opción puede ser serializar los datos del formulario y luego obtener el valor del formulario, pero esto también funcionaría
const form = document.querySelectorAll('form'); function submitForm() { const data = []; for(let i=0; i<form.length; i++) { const elements = form[i].elements; data.push({form: form[i].getAttribute('data-category'), inputData: {}}); for(let j=0; j<elements.length; j++) { if(elements[j].type !== 'radio') { data[i].inputData[[elements[j].name]] = elements[j].value; } else { if(elements[j].checked) { data[i].inputData[[elements[j].name]] = elements[j].value; } } } } console.log(data); } <form data-category="1"> <div class="form-group"> <label for="usr">First Name:</label> <input type="text" class="form-control" id="usr" name="firstName" /> </div> <div class="form-group"> <label for="pwd">Last Name:</label> <input type="text" class="form-control" id="pwd" name="lastName" /> </div> </form> <form data-category="2"> <div class="form-group"> <label for="usr">Name:</label> <input type="text" class="form-control" id="usr" name="firstName" /> </div> <div class="form-group"> <label for="usr">Age:</label> <input type="number" class="form-control" id="usr" name="age" /> </div> <div> <p>Gender></p> <div class="form-check"> <label class="form-check-label"> <input type="radio" class="form-check-input" name="gender" value="M" />Male </label> </div> <div class="form-check"> <label class="form-check-label"> <input type="radio" class="form-check-input" name="gender" valeu="F" />Female </label> </div> </div> </form> <button type="submit" class="btn btn-primary" onclick="submitForm()">Submit</button>Puede usar FormData y Object.fromEntries para obtener los datos del formulario fácilmente como se muestra a continuación:
const btn = document.querySelector("#submit"); btn.addEventListener("click", () => { const forms = document.querySelectorAll("form"); const output = []; forms.forEach(form => { output.push({ form: form.dataset.category, inputData: Object.fromEntries(new FormData(form)), }); }); console.log(output); }); <!DOCTYPE html> <html lang="en"> <head> </head> <body> <form data-category="1"> <div class="form-group"> <label for="usr">First Name:</label> <input type="text" class="form-control" id="usr" name="username" /> </div> <div class="form-group"> <label for="pwd">Last Name:</label> <input type="text" class="form-control" id="pwd" name="lname" /> </div> </form> <form data-category="2"> <div class="form-group"> <label for="usr">Name:</label> <input type="text" class="form-control" id="usr" name="username" /> </div> <div class="form-group"> <label for="usr">Age:</label> <input type="number" class="form-control" id="usr" name="age" /> </div> <div> <p>Gender</p> <div class="form-check"> <label class="form-check-label"> <input type="radio" class="form-check-input" name="gender" value="1" />Male </label> </div> <div class="form-check"> <label class="form-check-label"> <input type="radio" class="form-check-input" name="gender" value="0" />Female </label> </div> </div> </form> <button id="submit" type="button" class="btn btn-primary"> Submit </button> </body> </html>