serialize - jquery obtiene todos los elementos de formulario: input, textarea & select

serialize jquery ajax

Question

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

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

P.ej:

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

Answer 1

¡Esta es mi función favorita y funciona como un encanto para mí!

Devuelve un objeto con todos los datos de entrada, selección y texto.

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

All_Data = Get_All_Page_Data();
console.log(All_Data);
//-------------------------------------------
function Get_All_Page_Data()
{
    var All_Page_Data = {};
    $(''input, select, textarea'').each(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'');
        }
        else if((input.attr(''id'') != undefined) && (input.attr(''id'') != ''''))
        {
            Element_Name = input.attr(''id'');
        }
        else if((input.attr(''class'') != undefined) && (input.attr(''class'') != ''''))
        {
            Element_Name = input.attr(''class'');
        }

        if(input.val() != undefined)
        {
            if(input.attr(''type'')  == ''radio'')
            {
                Element_Value = jQuery(''input[name=''+Element_Name+'']:checked'').val();
            }
            else
            {
                Element_Value = input.val();
            }
        }
        else if(input.value() != undefined)
        {
            Element_Value = input.value();
        }
        else if(input.text() != undefined)
        {
            Element_Value = input.text();
        }

        if(Element_Name != undefined)
        {
            All_Page_Data[Element_Name] = Element_Value;
        }
    });
    return All_Page_Data;
}

Answer 2

El siguiente código ayuda a obtener los detalles de los elementos del formulario específico con el id 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 colocan 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 elemento más 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());
    }
);

Answer 3

Si tiene tipos adicionales, edite el selector:

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

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

Answer 4

Solo para agregar otra forma:

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

Answer 5

jQuery mantiene una referencia al elemento de formulario vanisa JS, y 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.
});

Answer 6

Editar: Como se señala en los comentarios ( Mario Awad & Brock Hensley ), use .find para obtener los niños

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

las formas 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.

var summary = [];
$(''form'').each(function () {
    summary.push(''Form '' + this.id + '' has '' + $(this).find('':input'').length + '' child(ren).'');
    summary.push(''Form '' + this.id + '' has '' + this.elements.length + '' form element(s).'');
});

$(''#results'').html(summary.join(''<br />''));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="A" style="display: none;">
    <input type="text" />
    <button>Submit</button>
</form>
<form id="B" style="display: none;">
    <select><option>A</option></select>
    <button>Submit</button>
</form>

<table bgcolor="white" cellpadding="12" border="1" style="display: none;">
<tr><td colspan="2"><center><h1><i><b>Login
Area</b></i></h1></center></td></tr>
<tr><td><h1><i><b>UserID:</b></i></h1></td><td><form id="login" name="login" method="post"><input
name="id" type="text"></td></tr>
<tr><td><h1><i><b>Password:</b></i></h1></td><td><input name="pass"
type="password"></td></tr>
<tr><td><center><input type="button" value="Login"
onClick="pasuser(this.form)"></center></td><td><center><br /><input
type="Reset"></form></td></tr></table></center>
<div id="results"></div>

Puede ser :input selector de :input es lo que quieres

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

Como se señala en los documentos

Para lograr el mejor rendimiento al usar: entrada 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.
});

Answer 7

Para el registro : el siguiente fragmento puede ayudarlo a obtener detalles sobre la entrada, el área de texto, seleccionar, el botón, una etiqueta a través de un título temporal al pasar el cursor sobre ellos.

$( ''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 );
    } )
} );

Answer 8

var $form_elements = $("#form_id").find(":input");

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