jquery obtiene todos los elementos del formulario: entrada, área de texto y selección

108

¿Existe una manera fácil (sin enumerarlos todos por separado) en jquery para seleccionar todos los elementos del formulario y solo los elementos del formulario?

No puedo usar children (), etc. porque el formulario contiene otro HTML.

P.ej:

$("form").each(function(){
    $(this, "input, textarea, select");
});
John Magnolia
fuente

Respuestas:

179

Editar: Como se señaló en los comentarios ( Mario Awad y Brock Hensley ), use .findpara hacer que los niños

$("form").each(function(){
    $(this).find(':input') //<-- Should return all input elements in that specific form.
});

Los formularios también tienen una colección de elementos, a veces esto difiere de los niños, como cuando la etiqueta del formulario está en una tabla y no está cerrada.


Puede ser : el selector de entrada es lo que quieres

$ ("formulario"). each (function () {$ (': input', this) // <- Debe devolver todos los elementos de entrada en esa forma específica.});

Como se señaló en los documentos

Para lograr el mejor rendimiento al usar: input para seleccionar elementos, primero seleccione los elementos usando un selector de CSS puro, luego use .filter (": input").

Puede usar como a continuación,

$("form").each(function(){
    $(this).filter(':input') //<-- Should return all input elements in that specific form.
});

Selvakumar Arumugam
fuente
3
Gracias, aunque después de leer: api.jquery.com/input-selector, el rendimiento es un problema, también puedo enumerarlos. Sin embargo
John Magnolia
8
¿Soy solo yo o esto no funciona select? EDITAR: no importa, funciona con seleccionar si usofind(':input')
Brock Hensley
1
Debe utilizar "buscar" en lugar de "filtro" aquí, ya que "filtro" no puede funcionar en un solo elemento (en este caso, el elemento "este"). Con "filtro" no podrá seleccionar ningún elemento del formulario y no solo "seleccionar" elementos. Gracias a @Brock Hensley por señalar esto.
Mario Awad
¿Qué hay de las formas grandes? Tengo un formulario enorme con más de 4000 elementos y este selector es muy lento. En la especificación está escrito que: la entrada no está optimizada para el navegador mediante CSS3, por lo que no me funciona: /. ¿Alguna otra idea?
Vasil Popov
@VasilPopov Lo anterior puede ser demasiado lento para usted. Puede probar un par de soluciones, de cualquier manera necesita agrupar menos elementos y seleccionarlos.
Selvakumar Arumugam
52

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
Por qué esto toma todos los valores y opciones de un elemento seleccionado, en lugar de dar el valor de algo que ha sido seleccionado o en blanco. ?
user2906838
11

Si tiene tipos adicionales, edite el selector:

var formElements = new Array();
$("form :input").each(function(){
    formElements.push($(this));
});

Todos los elementos del formulario están ahora en la matriz formElements.

circusdei
fuente
7

Para el registro : el siguiente fragmento puede ayudarlo a obtener detalles sobre la entrada, el área de texto, la selección, el botón y las etiquetas a través de un título temporal cuando se desplaza sobre ellos.

ingrese la descripción de la imagen aquí

$( 'body' ).on( 'mouseover', 'input, textarea, select, button, a', function() {
    var $tag = $( this );
    var $form = $tag.closest( 'form' );
    var title = this.title;
    var id = this.id;
    var name = this.name;
    var value = this.value;
    var type = this.type;
    var cls = this.className;
    var tagName = this.tagName;
    var options = [];
    var hidden = [];
    var formDetails = '';

    if ( $form.length ) {
        $form.find( ':input[type="hidden"]' ).each( function( index, el ) {
            hidden.push( "\t" + el.name + ' = ' + el.value );
        } );

        var formName = $form.prop( 'name' );
        var formTitle = $form.prop( 'title' );
        var formId = $form.prop( 'id' );
        var formClass = $form.prop( 'class' );

        formDetails +=
            "\n\nFORM NAME: " + formName +
            "\nFORM TITLE: " + formTitle +
            "\nFORM ID: " + formId +
            "\nFORM CLASS: " + formClass +
            "\nFORM HIDDEN INPUT:\n" + hidden.join( "\n" );
    }

    var tempTitle =
        "TAG: " + tagName +
        "\nTITLE: " + title +
        "\nID: " + id +
        "\nCLASS: " + cls;

    if ( 'SELECT' === tagName ) {
        $tag.find( 'option' ).each( function( index, el ) {
            options.push( el.value );
        } );

        tempTitle +=
            "\nNAME: " + name +
            "\nVALUE: " + value +
            "\nTYPE: " + type +
            "\nSELECT OPTIONS:\n\t" + options;

    } else if ( 'A' === tagName ) {
        tempTitle +=
            "\nHTML: " + $tag.html();

    } else {
        tempTitle +=
            "\nNAME: " + name +
            "\nVALUE: " + value +
            "\nTYPE: " + type;
    }

    tempTitle += formDetails;

    $tag.prop( 'title', tempTitle );
    $tag.on( 'mouseout', function() {
        $tag.prop( 'title', title );
    } )
} );
Igor Parra
fuente
¡Gran función! Gracias
Mohamad Hamouday
6

jQuery mantiene una referencia al elemento de formulario vanilla JS, y esto contiene una referencia a todos los elementos secundarios del formulario. Simplemente puede tomar la referencia y continuar:

var someForm = $('#SomeForm');

$.each(someForm[0].elements, function(index, elem){
    //Do something here.
});
Ron Sims II
fuente
5

La función de serialización de JQuery hace que sea bastante fácil obtener todos los elementos del formulario.

Demostración: http://jsfiddle.net/55xnJ/2/

$("form").serialize(); //get all form elements at once 

//result would be like this:
single=Single&multiple=Multiple&multiple=Multiple3&check=check2&radio=radio1
Avnish alok
fuente
5

¡Esta es mi función favorita y me funciona de maravilla!

Devuelve un objeto con todo para datos de entrada, selección y área de texto.

Y está tratando de obtener el nombre de los objetos buscando el nombre de los elementos más Id else clase.

var All_Data = Get_All_Forms_Data();
console.log(All_Data);

Función:

function Get_All_Forms_Data(Element)
{
    Element = Element || '';
    var All_Page_Data = {};
    var All_Forms_Data_Temp = {};
    if(!Element)
    {
        Element = 'body';
    }

    $(Element).find('input,select,textarea').each(function(i){
        All_Forms_Data_Temp[i] = $(this);
    });

    $.each(All_Forms_Data_Temp,function(){
        var input = $(this);
        var Element_Name;
        var Element_Value;

        if((input.attr('type') == 'submit') || (input.attr('type') == 'button'))
        {
            return true;
        }

        if((input.attr('name') !== undefined) && (input.attr('name') != ''))
        {
            Element_Name = input.attr('name').trim();
        }
        else if((input.attr('id') !== undefined) && (input.attr('id') != ''))
        {
            Element_Name = input.attr('id').trim();
        }
        else if((input.attr('class') !== undefined) && (input.attr('class') != ''))
        {
            Element_Name = input.attr('class').trim();
        }

        if(input.val() !== undefined)
        {
            if(input.attr('type') == 'checkbox')
            {
                Element_Value = input.parent().find('input[name="'+Element_Name+'"]:checked').val();
            }
            else if((input.attr('type') == 'radio'))
            {
                Element_Value = $('input[name="'+Element_Name+'"]:checked',Element).val();
            }
            else
            {
                Element_Value = input.val();
            }
        }
        else if(input.text() != undefined)
        {
            Element_Value = input.text();
        }

        if(Element_Value === undefined)
        {
            Element_Value = '';
        }

        if(Element_Name !== undefined)
        {
            var Element_Array = new Array();
            if(Element_Name.indexOf(' ') !== -1)
            {
                Element_Array = Element_Name.split(/(\s+)/);
            }
            else
            {
                Element_Array.push(Element_Name);
            }

            $.each(Element_Array,function(index, Name)
            {
                Name = Name.trim();
                if(Name != '')
                {
                    All_Page_Data[Name] = Element_Value;
                }
            });
        }
    });
    return All_Page_Data;
}
Mohamad Hamouday
fuente
Agradable, pero hay un error sutil en "Element_Value = jQuery ('input [name ="' + Element_Name + '"]: comprobado'). Val ();". Element_Name podría ser en realidad el ID del nodo o la clase, en cuyo caso no encontrará el elemento.
Rafael Werlang
1
¡Correcto, ahora lo he arreglado!
Mohamad Hamouday
4
var $form_elements = $("#form_id").find(":input");

Todos los elementos, incluido el botón de envío, están ahora en la variable $ form_elements.

ene
fuente
2
¿Cómo accedes a ellos?
Ngenazy
3

Solo para agregar otra forma:

$('form[name=' + formName + ']').find(':input')
usuario3770276
fuente
1

Prueba esta función

function fieldsValidations(element) {
    var isFilled = true;
    var fields = $("#"+element)
        .find("select, textarea, input").serializeArray();

    $.each(fields, function(i, field) {
        if (!field.value){
            isFilled = false;
            return false;
        }
    });
    return isFilled;
}

Y usarlo como

$("#submit").click(function () {

    if(fieldsValidations('initiate')){
        $("#submit").html("<i class=\"fas fa-circle-notch fa-spin\"></i>");
    }
});

Disfruta :)

Ahmed Jamal
fuente
0

Intente algo como esto:

<form action="/" id="searchForm">
<input type="text" name="s" placeholder="Search...">
<input type="submit" value="Search">
</form>
<!-- the result of the search will be rendered inside this div -->
<div id="result"></div>

<script>
// Attach a submit handler to the form
$( "#searchForm" ).submit(function( event ) {

  // Stop form from submitting normally
event.preventDefault();

// Get some values from elements on the page:
var $form = $( this ),
term = $form.find( "input[name='s']" ).val(),
url = $form.attr( "action" );

// Send the data using post
var posting = $.post( url, { s: term } );

// Put the results in a div
posting.done(function( data ) {
  var content = $( data ).find( "#content" );
  $( "#result" ).empty().append( content );
    });
  });
</script>

Tenga en cuenta el uso de input []

Srinath Shah
fuente
esto no parece tener
áreas de
0

todas las entradas:

var inputs = $("#formId :input");

todos los botones

var button = $("#formId :button")
DLMAN
fuente