validacion - validar formulario javascript html5

Obtener campos de entrada de formulario utilizando jQuery?

Question

Tengo un formulario con muchos campos de entrada.

Cuando detecto el evento de envío de formulario con jQuery, ¿es posible obtener todos los campos de entrada de ese formulario en una matriz asociativa?

Answer 1

¿De asociación? No sin algún trabajo, pero puedes usar selectores genéricos:

var items = new Array();

$(''#form_id:input'').each(function (el) {
    items[el.name] = el;
});

Answer 2

A veces me parece que obtener uno a la vez es más útil. Para eso, hay esto:

var input_name = "firstname";
var input = $("#form_id :input[name=''"+input_name+"'']"); 

Answer 3

Aquí hay otra solución, de esta manera puede obtener todos los datos sobre el formulario y usarlos en una llamada del servidor o algo así.

$(''.form'').on(''submit'', function( e )){ 
   var form = $( this ), // this will resolve to the form submitted
       action = form.attr( ''action'' ),
         type = form.attr( ''method'' ),
         data = {};

     // Make sure you use the ''name'' field on the inputs you want to grab. 
   form.find( ''[name]'' ).each( function( i , v ){
      var input = $( this ), // resolves to current input element.
          name = input.attr( ''name'' ),
          value = input.val();
      data[name] = value;
   });

  // Code which makes use of ''data''.

 e.preventDefault();
}

Luego puedes usar esto con llamadas ajax:

function sendRequest(action, type, data) {
       $.ajax({
            url: action,
           type: type,
           data: data
       })
       .done(function( returnedHtml ) {
           $( "#responseDiv" ).append( returnedHtml );
       })
       .fail(function() {
           $( "#responseDiv" ).append( "This failed" );
       });
}

Espero que esto sea de alguna utilidad para cualquiera de ustedes :)

Answer 4

Cuando tuve que hacer una llamada ajax con todos los campos del formulario, tuve problemas con el : selector de entrada devolviendo todas las casillas de verificación si estaban o no marcadas. Agregué un nuevo selector para obtener los elementos de formulario que se pueden enviar:

$.extend($.expr['':''],{
    submitable: function(a){
        if($(a).is('':checkbox:not(:checked)''))
        {
            return false;
        }
        else if($(a).is('':input''))
        {
            return true;
        }
        else
        {
            return false;
        }
    }
});

uso:

$(''#form_id :submitable'');

Aunque no lo he probado con varios cuadros de selección, pero funciona para obtener todos los campos de formulario de la forma en que lo haría un envío estándar.

Utilicé esto al personalizar las opciones del producto en un sitio de OpenCart para incluir casillas de verificación y campos de texto, así como el tipo de casilla de selección estándar.

Answer 5

El complemento jquery.form puede ayudar con lo que otros buscan para terminar con esta pregunta. No estoy seguro de si hace directamente lo que quieres o no.

También está la función serializeArray .

Answer 6

Espero que esto ayude a alguien. :)

// This html:
// <form id="someCoolForm">
// <input type="text" class="form-control" name="username" value="...." />
// 
// <input type="text" class="form-control" name="profile.first_name" value="...." />
// <input type="text" class="form-control" name="profile.last_name" value="...." />
// 
// <input type="text" class="form-control" name="emails[]" value="..." />
// <input type="text" class="form-control" name="emails[]" value=".." />
// <input type="text" class="form-control" name="emails[]" value="." />
// </form>
// 
// With this js:
// 
// var form1 = parseForm($(''#someCoolForm''));
// console.log(form1);
// 
// Will output something like:
// {
// username: "test2"
// emails:
//   0: "[email protected]"
//   1: "[email protected]"
// profile: Object
//   first_name: "..."
//   last_name: "..."
// }
// 
// So, function below:

var parseForm = function (form) {

    var formdata = form.serializeArray();

    var data = {};

    _.each(formdata, function (element) {

        var value = _.values(element);

        // Parsing field arrays.
        if (value[0].indexOf(''[]'') > 0) {
            var key = value[0].replace(''[]'', '''');

            if (!data[key])
                data[key] = [];

            data[value[0].replace(''[]'', '''')].push(value[1]);
        } else

        // Parsing nested objects.
        if (value[0].indexOf(''.'') > 0) {

            var parent = value[0].substring(0, value[0].indexOf("."));
            var child = value[0].substring(value[0].lastIndexOf(".") + 1);

            if (!data[parent])
                data[parent] = {};

            data[parent][child] = value[1];
        } else {
            data[value[0]] = value[1];
        }
    });

    return data;
};

Answer 7

Estoy usando este código sin cada bucle:

$(''.subscribe-form'').submit(function(e){
    var arr=$(this).serializeArray();
    var values={};
    for(i in arr){values[arr[i][''name'']]=arr[i][''value'']}
    console.log(values);
    return false;
});

Answer 8

Inspirado por las respuestas de Lance Rushing y Simon_Weaver , esta es mi solución favorita.

$(''#myForm'').submit( function( event ) {
    var values = $(this).serializeArray();
    // In my case, I need to fetch these data before custom actions
    event.preventDefault();
});

La salida es una matriz de objetos, por ejemplo,

[{name: "start-time", value: "11:01"}, {name: "end-time", value: "11:11"}]

Con el código de abajo,

var inputs = {};
$.each(values, function(k, v){
    inputs[v.name]= v.value;
});

su salida final sería

{"start-time":"11:01", "end-time":"11:01"}

Answer 9

La misma solución dada por nickf , pero con los nombres de entrada de matriz tomados en cuenta, por ejemplo,

<input type="text" name="array[]" />

values = {};
$("#something :input").each(function() {
  if (this.name.search(//[/]/) > 0) //search for [] in name
  {
    if (typeof values[this.name] != "undefined") {
      values[this.name] = values[this.name].concat([$(this).val()])
    } else {
      values[this.name] = [$(this).val()];
    }
  } else {
    values[this.name] = $(this).val();
  }
});

Answer 10

No olvides las casillas de verificación y los botones de radio.

var inputs = $("#myForm :input");
var obj = $.map(inputs, function(n, i) {
  var o = {};
  if (n.type == "radio" || n.type == "checkbox")
    o[n.id] = $(n).attr("checked");
  else
    o[n.id] = $(n).val();
  return o;
});
return obj

Answer 11

Parece extraño que nadie haya votado o propuesto una solución concisa para obtener datos de la lista. Casi ninguna forma va a ser objetos de una sola dimensión.

La desventaja de esta solución es, por supuesto, que habrá que acceder a sus objetos singleton en el índice [0]. Pero IMO es mucho mejor que usar una de las soluciones de mapeo de doce líneas.

var formData = $(''#formId'').serializeArray().reduce(function (obj, item) {
    if (obj[item.name] == null) {
        obj[item.name] = [];
    } 
    obj[item.name].push(item.value);
    return obj;
}, {});

Answer 12

Serialización () es el mejor método. @ Christopher Parker dice que la respuesta de Nickf logra más, sin embargo, no tiene en cuenta que la forma puede contener áreas de texto y menús seleccionados. Es mucho mejor usar serialize () y luego manipular eso como sea necesario. Los datos de serialize () se pueden usar en una publicación u obtención de Ajax, por lo que no hay problema allí.

Answer 13

Si necesita obtener múltiples valores de las entradas y está usando [] para definir las entradas con múltiples valores, puede usar lo siguiente:

$(''#contentform'').find(''input, textarea, select'').each(function(x, field) {
    if (field.name) {
        if (field.name.indexOf(''[]'')>0) {
            if (!$.isArray(data[field.name])) {
               data[field.name]=new Array();
            }
            data[field.name].push(field.value);
        } else {
            data[field.name]=field.value;
        }
    }                   
});

Answer 14

Tarde a la fiesta sobre esta cuestión, pero esto es aún más fácil:

$(''#myForm'').submit(function() {
    // Get all the forms elements and their values in one step
    var values = $(this).serialize();

});

Answer 15

Todas las respuestas son buenas, pero si hay un campo que desea ignorar en esa función? Fácil, asigne una propiedad al campo, por ejemplo, ignore_this:

<input type="text" name="some_name" ignore_this>

Y en su Función Serializar:

if(!$(name).prop(''ignorar'')){
   do_your_thing;
}

Esa es la forma en que ignoras algunos campos.

Answer 16

Tuve el mismo problema y lo resolví de otra manera.

var arr = new Array();
$('':input'').each(function() {
 arr.push($(this).val());
});
arr;

Devuelve el valor de todos los campos de entrada. Podría cambiar el $('':input'') para ser más específico.

Answer 17

Tuve un problema similar con un pequeño giro y pensé que lo tiraría. Tengo una función de devolución de llamada que obtiene el formulario, así que ya tenía un objeto de formulario y no podía hacer variantes fáciles en $(''form:input'') . En su lugar se me ocurrió:

    var dataValues = {};
    form.find(''input'').each(
        function(unusedIndex, child) {
            dataValues[child.name] = child.value;
        });

Es una situación similar pero no idéntica, pero encontré este hilo muy útil y pensé que lo pondría al final y espero que alguien más lo encuentre útil.

Answer 18

jQuery''s serializeArray no incluye campos deshabilitados, por lo que si también los necesita, intente:

var data = {};
$(''form.my-form'').find(''input, textarea, select'').each(function(i, field) {
    data[field.name] = field.value;
});

Answer 19

http://api.jquery.com/serializearray/

$(''#form'').on(''submit'', function() {
    var data = $(this).serializeArray();
});

Esto también se puede hacer sin jQuery usando el objeto FormData Nivel 2 de XMLHttpRequest

http://www.w3.org/TR/2010/WD-XMLHttpRequest2-20100907/#the-formdata-interface

var data = new FormData([form])

Answer 20

Esta pieza de código funcionará en lugar del nombre, ingrese el nombre de los campos de formulario

$(document).ready(function(){
  $("#form_id").submit(function(event){
    event.preventDefault();
    var name = $("input[name=''name'']",this).val();
    var email = $("input[name=''email'']",this).val();
  });
});

Answer 21

$(''#myForm'').bind(''submit'', function () {
  var elements = this.elements;
});

La variable de elementos contendrá todas las entradas, selecciones, áreas de texto y campos dentro del formulario.

Answer 22

$(''#myForm'').submit(function() {
    // get all the inputs into an array.
    var $inputs = $(''#myForm :input'');

    // not sure if you wanted this, but I thought I''d add it.
    // get an associative array of just the values.
    var values = {};
    $inputs.each(function() {
        values[this.name] = $(this).val();
    });

});

Gracias a la sugerencia de Simon_Weaver, aquí hay otra forma de hacerlo, utilizando serializeArray :

var values = {};
$.each($(''#myForm'').serializeArray(), function(i, field) {
    values[field.name] = field.value;
});

Tenga en cuenta que este fragmento de código fallará en <select multiple> elementos.

Parece que las nuevas entradas de formulario HTML 5 no funcionan con serializeArray en jQuery versión 1.3. Esto funciona en la versión 1.4+