Sobre tu solución:
Es innecesario obtener la cantidad de inputs que tiene el formulario para luego iterar sobre ellos. Tu solución con jQuery puede ser reducida a:
function getFormData(){
var config = {};
$('input').each(function () {
config[this.name] = this.value;
});
console.log(config);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1> Login </h1>
<form>
<label for"username">Email:</label>
<input name="username" type ="email" value="[email protected]">
<label for="password">Password:</label>
<input name="password" type ="password" value="hello1234">
<button type="button" onclick="getFormData();">Get form data</button>
</form>
Puedes aprovechar la iteración de la función each
para ya inicializar el objeto config
, refiriendote a cada elemento mediante la keyword this
, la cual en este contexto refiere al elemento de iteración.
Sin utilizar jQuery:
Lo mismo puedes lograrlo sin utilizar jQuery, tan solo con JavaScript mediante getElementsByTagName().
Por ejemplo:
function getFormData(formId){
let formValues = {};
var form1Inputs = document.forms[formId].getElementsByTagName("input");
for(let i=0; i<form1Inputs.length; i++){
formValues[form1Inputs[i].name]=form1Inputs[i].value;
}
console.log(formValues);
}
<h1> Login </h1>
<form id="form1">
<label for"username">Email:</label>
<input name="username" type ="email" value="[email protected]">
<label for="password">Password:</label>
<input name="password" type ="password" value="hello1234">
<button type="button" onclick="getFormData('form1');">Get form data</button>
</form>
Otras alternativas con jQuery:
- utilizando serializeArray() se crea un array a partir de los elementos del formulario que tengan
name
y no se encuentren disabled
(ver como password
no es incluido en el ejemplo siguiente)
- utilizando serialize(), el cual retorna un string.
function getFormData(formId){
console.log($('#'+formId).serializeArray());
console.log($('#'+formId).serialize());
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1> Login </h1>
<form id="form1">
<label for"username">Email:</label>
<input name="username" type ="email" value="[email protected]">
<label for="password">Password:</label>
<input name="password" type ="password" value="hello1234" disabled>
<button type="button" onclick="getFormData('form1');">Get form data</button>
</form>