removeattr - ¿Cómo puedo obtener datos de formulario con JavaScript/jQuery?

title css

Question

¿Existe una forma simple y de una línea para obtener los datos de un formulario tal como sería si se presentara de la forma clásica de HTML únicamente?

Por ejemplo, en:

<form>
 <input type="radio" name="foo" value="1" checked="checked" />
 <input type="radio" name="foo" value="0" />
 <input name="bar" value="xxx" />
 <select name="this">
  <option value="hi" selected="selected">Hi</option>
  <option value="ho">Ho</option>
</form>

Afuera:

{
 "foo": "1",
 "bar": "xxx",
 "this": "hi"
}

Algo así es demasiado simple, ya que no incluye (correctamente) áreas de texto, selecciones, botones de opción y casillas de verificación:

$("#form input").each(function() {
 data[theFieldName] = theFieldValue;
});

Answer 1

Aquí hay una buena función JS de vainilla que escribí para extraer datos de formulario como un objeto. También tiene opciones para insertar adiciones en el objeto y para borrar los campos de entrada del formulario.

const extractFormData = ({ form, clear, add }) => {
  return [].slice.call(form.children).filter(node => node.nodeName === ''INPUT'')
  .reduce((formData, input) => {
    const value = input.value
    if (clear) { input.value = '''' }
    return {
      ...formData,
      [input.name]: value
    }
  }, add)
}

Aquí hay un ejemplo de su uso con una solicitud de publicación:

submitGrudge(e) {
  e.preventDefault()

  const form = e.target
  const add = { id: Date.now(), forgiven: false }
  const grudge = extractFormData({ form, add, clear: true })

  // grudge = {
  //  "name": "Example name",
  //  "offense": "Example string",
  //  "date": "2017-02-16",
  //  "id": 1487877281983,
  //  "forgiven": false
  // }

  fetch(''http://localhost:3001/api/grudge'', {
    method: ''post'',
    headers: { ''Content-Type'': ''application/json'' },
    body: JSON.stringify(grudge)
  })
    .then(response => response.json())
    .then(grudges => this.setState({ grudges }))
    .catch(err => console.log(''error: '', err))
}

Answer 2

Aquí hay una implementación de JavaScript que funciona correctamente y que maneja correctamente las casillas de verificación, los botones de radio y los controles deslizantes (probablemente también otros tipos de entrada, pero solo los he probado).

function setOrPush(target, val) {
    var result = val;
    if (target) {
        result = [target];
        result.push(val);
    }
    return result;
}

function getFormResults(formElement) {
    var formElements = formElement.elements;
    var formParams = {};
    var i = 0;
    var elem = null;
    for (i = 0; i < formElements.length; i += 1) {
        elem = formElements[i];
        switch (elem.type) {
            case ''submit'':
                break;
            case ''radio'':
                if (elem.checked) {
                    formParams[elem.name] = elem.value;
                }
                break;
            case ''checkbox'':
                if (elem.checked) {
                    formParams[elem.name] = setOrPush(formParams[elem.name], elem.value);
                }
                break;
            default:
                formParams[elem.name] = setOrPush(formParams[elem.name], elem.value);
        }
    }
    return formParams;
}

Ejemplo de trabajo:

    function setOrPush(target, val) {
      var result = val;
      if (target) {
        result = [target];
        result.push(val);
      }
      return result;
    }

    function getFormResults(formElement) {
      var formElements = formElement.elements;
      var formParams = {};
      var i = 0;
      var elem = null;
      for (i = 0; i < formElements.length; i += 1) {
        elem = formElements[i];
        switch (elem.type) {
          case ''submit'':
            break;
          case ''radio'':
            if (elem.checked) {
              formParams[elem.name] = elem.value;
            }
            break;
          case ''checkbox'':
            if (elem.checked) {
              formParams[elem.name] = setOrPush(formParams[elem.name], elem.value);
            }
            break;
          default:
            formParams[elem.name] = setOrPush(formParams[elem.name], elem.value);
        }
      }
      return formParams;
    }

    //
    // Boilerplate for running the snippet/form
    //

    function ok() {
      var params = getFormResults(document.getElementById(''main_form''));
      document.getElementById(''results_wrapper'').innerHTML = JSON.stringify(params, null, '' '');
    }

    (function() {
      var main_form = document.getElementById(''main_form'');
      main_form.addEventListener(''submit'', function(event) {
        event.preventDefault();
        ok();
      }, false);
    })();

<form id="main_form">
  <div id="questions_wrapper">
    <p>what is a?</p>
    <div>
      <input type="radio" required="" name="q_0" value="a" id="a_0">
      <label for="a_0">a</label>
      <input type="radio" required="" name="q_0" value="b" id="a_1">
      <label for="a_1">b</label>
      <input type="radio" required="" name="q_0" value="c" id="a_2">
      <label for="a_2">c</label>
      <input type="radio" required="" name="q_0" value="d" id="a_3">
      <label for="a_3">d</label>
    </div>
    <div class="question range">
      <label for="a_13">A?</label>
      <input type="range" required="" name="q_3" id="a_13" min="0" max="10" step="1" list="q_3_dl">
      <datalist id="q_3_dl">
        <option value="0"></option>
        <option value="1"></option>
        <option value="2"></option>
        <option value="3"></option>
        <option value="4"></option>
        <option value="5"></option>
        <option value="6"></option>
        <option value="7"></option>
        <option value="8"></option>
        <option value="9"></option>
        <option value="10"></option>
      </datalist>
    </div>
    <p>A and/or B?</p>
    <div>
      <input type="checkbox" name="q_4" value="A" id="a_14">
      <label for="a_14">A</label>
      <input type="checkbox" name="q_4" value="B" id="a_15">
      <label for="a_15">B</label>
    </div>
  </div>
  <button id="btn" type="submit">OK</button>
</form>
<div id="results_wrapper"></div>

editar:

Si está buscando una implementación más completa, eche un vistazo a esta sección del proyecto para el que hice esto . Actualizaré esta pregunta eventualmente con la solución completa que se me ocurrió, pero quizás esto sea útil para alguien.

Answer 3

Aquí hay una solución muy simple y corta que incluso no requiere Jquery.

var formElements=document.getElementById("myForm").elements;    
var postData={};
for (var i=0; i<formElements.length; i++)
    if (formElements[i].type!="submit")//we dont want to include the submit-buttom
        postData[formElements[i].name]=formElements[i].value;

Answer 4

Basado en $(''form'').serializeArray() , devuelve pares clave-valor.

var data = $(''#form'').serializeArray().reduce(function(obj, item) {
    obj[item.name] = item.value;
    return obj;
}, {});

Answer 5

Escribí una biblioteca para resolver este problema: JSONForms . Toma una forma, pasa por cada entrada y construye un objeto JSON que puede leer fácilmente.

Digamos que tienes el siguiente formulario:

<form enctype=''application/json''>
  <input name=''places[0][city]'' value=''New York City''>
  <input type=''number'' name=''places[0][population]'' value=''8175133''>
  <input name=''places[1][city]'' value=''Los Angeles''>
  <input type=''number'' name=''places[1][population]'' value=''3792621''>
  <input name=''places[2][city]'' value=''Chicago''>
  <input type=''number'' name=''places[2][population]'' value=''2695598''>
</form>

Pasar el formulario al método de codificación JSONForms le devuelve el siguiente objeto:

{
  "places": [
    {
      "city": "New York City",
      "population": 8175133
    },
    {
      "city": "Los Angeles",
      "population": 3792621
    },
    {
      "city": "Chicago",
      "population": 2695598
    }
  ]
}

Aquí está la demo con su formulario.

Answer 6

Escribí una función que se ocupa de múltiples casillas de verificación y selecciones múltiples. En esos casos devuelve una matriz.

function getFormData(formId) {
    return $(''#'' + formId).serializeArray().reduce(function (obj, item) {
        var name = item.name,
            value = item.value;

        if (obj.hasOwnProperty(name)) {
            if (typeof obj[name] == "string") {
                obj[name] = [obj[name]];
                obj[name].push(value);
            } else {
                obj[name].push(value);
            }
        } else {
            obj[name] = value;
        }
        return obj;
    }, {});
}

Answer 7

Este método debería hacerlo. Serializa los datos del formulario y luego los convierte en un objeto. También se encarga de grupos de casillas de verificación.

function getFormObj(formId) {
  var formParams = {};
  $(''#'' + formId)
    .serializeArray()
    .forEach(function(item) {
      if (formParams[item.name]) {
        formParams[item.name] = [formParams[item.name]];
        formParams[item.name].push(item.value)
      } else {
        formParams[item.name] = item.value
      }
    });
  return formParams;
}

Answer 8

Esto agregará todos los campos de formulario al objeto "res" de JavaScript:

var res = {};
$("#form input, #form select, #form textarea").each(function(i, obj) {
    res[obj.name] = $(obj).val();
})

Answer 9

He incluido la respuesta para devolver también el objeto requerido.

function getFormData(form) {
var rawJson = form.serializeArray();
var model = {};

$.map(rawJson, function (n, i) {
    model[n[''name'']] = n[''value''];
});

return model;
}

Answer 10

Puedes usar esta función para tener un objeto o un JSON desde la forma.

para usarlo:

var object = formService.getObjectFormFields("#idform");

 function  getObjectFormFields(formSelector)
        {
            /// <summary>Função que retorna objeto com base nas propriedades name dos elementos do formulário.</summary>
            /// <param name="formSelector" type="String">Seletor do formulário</param>

            var form = $(formSelector);

            var result = {};
            var arrayAuxiliar = [];
            form.find(":input:text").each(function (index, element)
            {
                var name = $(element).attr(''name'');

                var value = $(element).val();
                result[name] = value;
            });

            form.find(":input[type=hidden]").each(function (index, element)
            {
                var name = $(element).attr(''name'');
                var value = $(element).val();
                result[name] = value;
            });


            form.find(":input:checked").each(function (index, element)
            {
                var name;
                var value;
                if ($(this).attr("type") == "radio")
                {
                    name = $(element).attr(''name'');
                    value = $(element).val();
                    result[name] = value;
                }
                else if ($(this).attr("type") == "checkbox")
                {
                    name = $(element).attr(''name'');
                    value = $(element).val();
                    if (result[name])
                    {
                        if (Array.isArray(result[name]))
                        {
                            result[name].push(value);
                        } else
                        {
                            var aux = result[name];
                            result[name] = [];
                            result[name].push(aux);
                            result[name].push(value);
                        }

                    } else
                    {
                        result[name] = [];
                        result[name].push(value);
                    }
                }

            });

            form.find("select option:selected").each(function (index, element)
            {
                var name = $(element).parent().attr(''name'');
                var value = $(element).val();
                result[name] = value;

            });

            arrayAuxiliar = [];
            form.find("checkbox:checked").each(function (index, element)
            {
                var name = $(element).attr(''name'');
                var value = $(element).val();
                result[name] = arrayAuxiliar.push(value);
            });

            form.find("textarea").each(function (index, element)
            {
                var name = $(element).attr(''name'');
                var value = $(element).val();
                result[name] = value;
            });

            return result;
        }

Answer 11

Si está utilizando jQuery, aquí hay una pequeña función que hará lo que está buscando.

Primero, agregue una ID a su formulario (a menos que sea el único formulario en la página, luego puede usar ''formulario'' como la consulta de dominio)

<form id="some-form">
 <input type="radio" name="foo" value="1" checked="checked" />
 <input type="radio" name="foo" value="0" />
 <input name="bar" value="xxx" />
 <select name="this">
  <option value="hi" selected="selected">Hi</option>
  <option value="ho">Ho</option>
</form>

<script>
//read in a form''s data and convert it to a key:value object
function getFormData(dom_query){
    var out = {};
    var s_data = $(dom_query).serializeArray();
    //transform into simple data/value object
    for(var i = 0; i<s_data.length; i++){
        var record = s_data[i];
        out[record.name] = record.value;
    }
    return out;
}

console.log(getFormData(''#some-form''));
</script>

La salida se vería como:

{
 "foo": "1",
 "bar": "xxx",
 "this": "hi"
}

Answer 12

También puede utilizar los objetos FormData ; El objeto FormData le permite compilar un conjunto de pares clave / valor para enviar usando XMLHttpRequest. Se destina principalmente al uso en el envío de datos de formularios, pero se puede usar independientemente de los formularios para transmitir datos codificados.

        var formElement = document.getElementById("myform_id");
        var formData = new FormData(formElement);
        console.log(formData);

Answer 13

Todos ustedes no son del todo correctos. No puedes escribir:

formObj[input.name] = input.value;

Porque de esta manera si tiene una lista de selección múltiple, sus valores se sobrescribirán con el último, ya que se transmite como: "param1": "value1", "param1": "value2".

Entonces, el enfoque correcto es:

if (formData[input.name] === undefined) {
    formData[input.name] = input.value;
}
else {
    var inputFieldArray = $.merge([], $.isArray(formData[input.name]) ? formData[input.name] : [formData[input.name]]);
    $.merge(inputFieldArray, [input.value]);
    formData[input.name] = $.merge([], inputFieldArray);
}

Answer 14

Use $(''form'').serializeArray() , que devuelve una matriz :

[
  {"name":"foo","value":"1"},
  {"name":"bar","value":"xxx"},
  {"name":"this","value":"hi"}
]

La otra opción es $(''form'').serialize() , que devuelve una cadena :

"foo=1&bar=xxx&this=hi"

Echa un vistazo a esta demo jsfiddle

Answer 15

Yo uso esto:

jQuery Plugin

(function($){
  $.fn.getFormData = function(){
    var data = {};
    var dataArray = $(this).serializeArray();
    for(var i=0;i<dataArray.length;i++){
      data[dataArray[i].name] = dataArray[i].value;
    }
    return data;
  }
})(jQuery);

Formulario HTML

<form id=''myform''>
  <input name=''myVar1'' />
  <input name=''myVar2'' />
</form>

Obtener los datos

var myData = $("#myForm").getFormData();

Answer 16

mostrando los campos de elementos de entrada del formulario y el archivo de entrada para enviar su formulario sin actualizar la página y tomar todos los valores con el archivo incluido aquí.

<form id="imageUploadForm"   action="" method="post" enctype="multipart/form-data">
<input type="text" class="form-control" id="fname" name=''fname'' placeholder="First Name" >
<input type="text" class="form-control" name=''lname'' id="lname" placeholder="Last Name">
<input type="number" name=''phoneno''  class="form-control" id="phoneno" placeholder="Phone Number">
<textarea class="form-control" name=''address'' id="address" rows="5" cols="5" placeholder="Your Address"></textarea>
<input type="file" name="file" id="file" >
<input type="submit" id="sub" value="Registration">        
</form>

en la página del botón Enviar enviará una solicitud ajax a su archivo php.

$(''#imageUploadForm'').on(''submit'',(function(e) 
{
     fname = $(''#fname'').val();
     lname =  $(''#lname'').val();
     address =  $(''#address'').val();
     phoneno =  $(''#phoneno'').val();
     file =  $(''#file'').val();
     e.preventDefault();
     var formData = new FormData(this);
     formData.append(''file'', $(''#file'')[0]);
     formData.append(''fname'',$(''#fname'').val());
     formData.append(''lname'',$(''#lname'').val());
     formData.append(''phoneno'',$(''#phoneno'').val());
     formData.append(''address'',$(''#address'').val());
     $.ajax({
  type:''POST'',
                url: "test.php",
                //url: ''<?php echo base_url().''edit_profile/edit_profile2'';?>'',

                data:formData,
                cache:false,
                contentType: false,
                processData: false,
                success:function(data)
                {
                     alert(''Data with file are submitted !'');

                }

     });

}))

Answer 17

use .serializeArray () para obtener los datos en formato de matriz y luego convertirlos en un objeto:

function getFormObj(formId) {
    var formObj = {};
    var inputs = $(''#''+formId).serializeArray();
    $.each(inputs, function (i, input) {
        formObj[input.name] = input.value;
    });
    return formObj;
}

Answer 18

Respuesta actualizada para 2014: HTML5 FormData hace esto

var formData = new FormData(document.querySelector(''form''))

A continuación, puede publicar formData exactamente como está: contiene todos los nombres y valores utilizados en el formulario.

Answer 19

$("#form input, #form select, #form textarea").each(function() {
 data[theFieldName] = theFieldValue;
});

aparte de eso, es posible que desee ver $(''form'').serialize() ;

Answer 20

$(''#myform'').serialize();

Answer 21

$(''form'').serialize() //this produces: "foo=1&bar=xxx&this=hi"

demo

Answer 22

$(form).serializeArray().reduce(function (obj, item) {
      if (obj[item.name]) {
           if ($.isArray(obj[item.name])) {
               obj[item.name].push(item.value);
           } else {
                var previousValue = obj[item.name];
                obj[item.name] = [previousValue, item.value];
           }
      } else {
           obj[item.name] = item.value;
      }

     return obj;
}, {});

Se solucionará el problema: no podría trabajar con multiselects.

Answer 23

document.querySelector(''form'').addEventListener(''submit'', (e) => {
  const formData = new FormData(e.target);
  // Now you can use formData.get(''foo''), for example.
  // Don''t forget e.preventDefault() if you want to stop normal form .submission
});

Esta es una respuesta ingeniosa, pero déjame explicarte por qué esta es una mejor solución:

• Estamos manejando adecuadamente un envío de formulario en lugar de presionar un botón. Algunas personas les gusta empujar entrar en los campos. Algunas personas usan dispositivos de entrada alternativos, como entrada de voz u otros dispositivos de accesibilidad. Maneja el formulario de envío y lo solucionas correctamente para todos.

• Estamos profundizando en los datos del formulario para el formulario real que se envió. Si cambia el selector de formulario más adelante, no tiene que cambiar los selectores para todos los campos. Además, puede tener varios formularios con los mismos nombres de entrada. No es necesario que se desestabilice con las ID excesivas y cuáles no, solo haga un seguimiento de las entradas en función del formulario que se envió. Esto también le permite usar un controlador de eventos único para múltiples formularios si es apropiado para su situación.

• La interfaz de FormData es bastante nueva, pero está bien soportada por los navegadores. Es una excelente manera de construir esa recopilación de datos para obtener los valores reales de lo que está en el formulario. Sin él, tendrá que recorrer todos los elementos (como con form.elements ) y averiguar qué está marcado, qué no, qué valores hay, etc. Totalmente posible si necesita soporte de navegador antiguo. pero la interfaz FormData es más simple.

• Estoy usando ES6 aquí ... no es un requisito, por lo tanto, vuelva a cambiarlo para que sea compatible con ES5 si necesita soporte de navegador antiguo.

Answer 24

function getFormData($form){
    var unindexed_array = $form.serializeArray();
    var indexed_array = {};

    $.map(unindexed_array, function(n, i){
        if(indexed_array[n[''name'']] == undefined){
            indexed_array[n[''name'']] = [n[''value'']];
        }else{
            indexed_array[n[''name'']].push(n[''value'']);
        }
    });

    return indexed_array;
}

Answer 25

var formData = new FormData($(''#form-id''));
params   = $(''#form-id'').serializeArray();

$.each(params, function(i, val) {
    formData.append(val.name, val.value);
});