jquery obtiene toda la entrada de un formulario específico

84

¿Hay alguna forma de completar toda la entrada desde cierto formulario? digamos, algo como esto:

<form id="unique00">
  <input type="text" name="whatever" id="whatever" value="whatever" />
  <div>
    <input type="checkbox" name="whatever" id="whatever" value="whatever" />
  </div>
  <table><tr><td>
    <input type="hidden" name="whatever" id="whatever" value="whatever" />
    <input type="submit" value="qweqsac" />
  </td></tr></table>
</form>
<form id="unique01">
  <div>
    <input type="text" name="whatever" id="whatever" value="whatever" />
    <input type="checkbox" name="whatever" id="whatever" value="whatever" />
  </div>
  <table><tr><td>
    <input type="hidden" name="whatever" id="whatever" value="whatever" />
  </td></tr></table>
  <select>blah...</select>
  <input type="submit" value="qweqsac" />
</form>
etc forms... forms...

* nota: cada formulario puede tener una cantidad diferente de entrada y tipo y también una estructura html diferente

entonces, ¿hay alguna forma de completar la entrada desde cierta identificación de formulario? por ejemplo, si hago clic en el botón enviar desde cierta identificación de formulario, jquery completará todas las entradas dentro de esa identificación de formulario. actualmente lo que estoy haciendo es así:

$("form").submit(function(){ return validateForm($(this)) });
function validateForm(form){
var retVal = true;
var re;
$.each(form.serializeArray(), function(i, field) {
  var input = $('input[name='+field.name+']');
  field.value = $.trim(field.value);
  switch(field.name){
    case "name" :
        and another cases...
      }
    })
 }

eso fue un trabajo, pero en ese caso, solo obtengo el field.name y field.value, y en realidad lo que quiero es, quiero un objeto jquery para cada elemento de entrada, para poder acceder a su css, id, nombre y incluso animar esos elementos de entrada

hay alguna forma de esto?

por favor avíseme y gracias de antemano! Y

Y
fuente

Respuestas:

180

Para recorrer todas las entradas de un formulario, puede hacer esto:

$("form#formID :input").each(function(){
 var input = $(this); // This is the jquery object of the input, do what you will
});

Esto usa el selector jquery : input para obtener TODOS los tipos de entradas, si solo desea texto, puede hacer:

$("form#formID input[type=text]")//...

etc.

TJB
fuente
3
Creo que la entrada funciona para eso, pero de lo contrario podría hacer:$("form#formID input[type=text],form#formID select")
TJB
Tenga en cuenta un error tipográfico en su primera respuesta anterior. $ ("from should be $ (" form
Mitch
1
$("form#formID :input").eachinputtipo de salidas , selecttipo e incluso buttontipo de entradas. Al menos lo hace en mi código.
TARKUS
3
@TARKUS inputvs :input. $ (": input") selecciona todos los elementos del formulario jQuery. $ ("entrada") selecciona solo etiquetas de entrada.
Johnathan Elmore
25

El siguiente código ayuda a obtener los detalles de los elementos del formulario específico con la identificación del formulario,

$('#formId input, #formId select').each(
    function(index){  
        var input = $(this);
        alert('Type: ' + input.attr('type') + 'Name: ' + input.attr('name') + 'Value: ' + input.val());
    }
);

El siguiente código ayuda a obtener los detalles de los elementos de todos los formularios que se encuentran en la página de carga,

$('form input, form select').each(
    function(index){  
        var input = $(this);
        alert('Type: ' + input.attr('type') + 'Name: ' + input.attr('name') + 'Value: ' + input.val());
    }
);

El siguiente código ayuda a obtener los detalles de los elementos que se colocan en la página de carga incluso cuando el elemento no está dentro de la etiqueta.

$('input, select').each(
    function(index){  
        var input = $(this);
        alert('Type: ' + input.attr('type') + 'Name: ' + input.attr('name') + 'Value: ' + input.val());
    }
);

NOTA: Agregamos el nombre de etiqueta de más elemento que necesitamos en la lista de objetos como se muestra a continuación,

Example: to get name of attribute "textarea",

$('input, select, textarea').each(
    function(index){  
        var input = $(this);
        alert('Type: ' + input.attr('type') + 'Name: ' + input.attr('name') + 'Value: ' + input.val());
    }
);
Srinivasan.S
fuente
1
No obtengo el valor del texto usando este input.val () .. ¿pueden ayudarme en eso?
DhavalThakor
Culpa mía. Sory estaba buscando en el lugar equivocado para la salida.
DhavalThakor
3

Utilice el atributo "elementos" del formulario HTML :

$.each($("form").elements, function(){ 
    console.log($(this));
    });

Ahora no es necesario proporcionar nombres como "entrada, área de texto, seleccionar ...", etc.

Markoj
fuente
¡Dooh! --demasiada información. Pruebe una forma más rápida de ver la información del formulario $ ("formulario: entrada"). Each (function (index) {console.log (index, this.type, this.id, this.name, this.value, this.placeholder );});
Jules Bartow