0

Buenos días, con todos, si en alguna ocasión, te pidieron desarrollar un formulario con muchos input, te propongo esta solución Jquery y JavaScript y claro luego la envías por Ajax.

 var config = {};
    //--->> calcular cuantos input tiene el formulario
    $('input').each(function ()
    {
        vInput += 1;
    });

for(var i=0;i<vInput;i++)
{
     var key = '' + document.forms[0].elements[i].name;
     var data = '' + $($form).find('[name=' + key + ']').val();
     config[key]=''+data;
}

console.log(config);
4
  • ¿Esto es una solución en vez de una pregunta? ¿O tienes alguna duda en cuanto a tu código? Commented el 30 sept. 2017 a las 15:54
  • 1
    Me enontre con esta solucion, la probe y me funciono si tienen una mejor manera de hacerlo, sería bueno compartila, gracias por tomarte el tiempo. Commented el 30 sept. 2017 a las 19:11
  • 1
    Sería bueno que separaras lo que es la pregunta con lo que es la respuesta. De esta manera, quedará mucho más claro y podrá ser de ayuda a mucha más gente. Commented el 30 sept. 2017 a las 19:18
  • Gracias, por tu ayuda, Commented el 30 sept. 2017 a las 20:49

1 respuesta 1

2

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>

1
  • 1
    Excelente, gracias lo probe, y está de lujo gracias por tu aporte. Commented el 30 sept. 2017 a las 23:14

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.