Aprenda a cambiar el comportamiento predeterminado de establecer el valor de las casillas de verificación como on y off durante la serialización de un formulario con jQuery Serialize y Serialize Array.

Durante la serialización de Datos que serán enviados a su servidor con AJAX, se enfrentará a un comportamiento grave que puede afectar considerablemente la cantidad de código que escriba y también el estilo. Normalmente enviamos la información desde un formulario, por ejemplo el siguiente:

<form id="myForm" action="cheese.php" method="post">
    <label>Name</label>
    <input type="text" name="name">
    <br>

    <label for="isProgrammer">Programmer</label>
    <input type="checkbox" name="isProgrammer" id="isProgrammer">
    <br>
    <label for="isDesigner">Designer</label>
    <input type="checkbox" name="isDesigner" id="isDesigner">

    <br>
    <label>Male</label>
    <input type="radio" name="gender" value="male">
    <label>Female</label>
    <input type="radio" name="gender" value="female">

    <br>
    <label>Description</label>
    <textarea name="description" cols="30" rows="10"></textarea>
</form>

<input type="button" id="btn" value="Serialize"/>

<script>
    $("#serialize").on("click", function(){
        var data = $("#myForm").serialize();
        alert(data);
    });

    $("#serializeArray").on("click", function(){
        var data = $("#myForm").serializeArray();
        alert(JSON.stringify(data));
    });
</script>

Esto se puede hacer fácilmente con jQuery usando los métodos serialize serializeArray como se muestra en la etiqueta del script cuando el usuario hace clic respectivamente en cada botón:

Serialize and SerializeArray Form jQuery

que generaría, respectivamente, la siguiente salida:

name=Carlos&isProgrammer=on&gender=male&description=This%20is%20me.

Y con serializeArray:

[
   {
      "name":"name",
      "value":"Carlos"
   },
   {
      "name":"isProgrammer",
      "value":"on"
   },
   {
      "name":"gender",
      "value":"male"
   },
   {
      "name":"description",
      "value":"This is me."
   }
]

Esto le facilita las cosas ya que no incluye los datos de entradas vacías y no necesita escribir código adicional. La problemática surge con la famosa entrada de casilla de verificación, cuya serialización se establece como valor cuando se marca un valor de cadena llamado "on". Esto sucede porque una casilla de verificación marcada simplemente envía su atributo de valor, sin embargo, como no tenemos ningún atributo de valor definido en la casilla de verificación, el valor enviado cuando está marcado es un simple texto "activado". Como sabrá, una casilla de verificación sin marcar no se envía a sí misma en el formulario, por lo que el navegador determina si se marcó o no y establece su valor en "activado".

Sin embargo, para algunos desarrolladores, puede resultar más fácil manipular directamente los datos enviados desde jQuery cuando es serializado por jQuery.serializeArray con una cadena JSON que se convierte automáticamente en una matriz de PHP / o lenguaje de servidor favorito para trabajar. Pero este valor "activado" no es útil en absoluto cuando trabajamos con valores booleanos. En cambio, nos gustaría recuperar un valor real.

1. Incluya la extensión jQuery

El primer paso para cumplir con nuestras necesidades es agregar la siguiente extensión jQuery de serialize serializeArray en su proyecto:

/**
 * Slightly modified the original script from this website. Instead of setting true and false as strings
 * it should send a plain Boolean variable.
 * 
 * @see https://tdanemar.wordpress.com/2010/08/24/jquery-serialize-method-and-checkboxes/
 */
(function ($) {
    $.fn.serialize = function (options) {
        return $.param(this.serializeArray(options));
    };

    $.fn.serializeArray = function (options) {
        var o = $.extend({
            checkboxesAsBools: false
        }, options || {});

        var rselectTextarea = /select|textarea/i;
        var rinput = /text|hidden|password|search|number/i;

        return this.map(function () {
            return this.elements ? $.makeArray(this.elements) : this;
        })
        .filter(function () {
            return this.name && !this.disabled &&
                (this.checked
                || (o.checkboxesAsBools && this.type === 'checkbox')
                || rselectTextarea.test(this.nodeName)
                || rinput.test(this.type));
            })
            .map(function (i, elem) {
                var val = $(this).val();
                return val == null ?
                null :
                $.isArray(val) ?
                $.map(val, function (val, i) {
                    return { name: elem.name, value: val };
                }) :
                {
                    name: elem.name,
                    value: (o.checkboxesAsBools && this.type === 'checkbox') ?
                        (this.checked ? true : false) :
                        val
                };
            }).get();
    };
})(jQuery);

Esta extensión no modificará el comportamiento predeterminado de jQuery.serialize y jQuery.serializeArray. Simplemente proporciona una nueva opción, a saber, checkboxesAsBools, por lo que cuando esta opción se define y se establece en true, ejecutará la lógica de la extensión.

2. Casillas de verificación como booleanos

Para definir el comportamiento de serializar casillas de verificación como booleanos, deberá especificar la nueva opción de este método:

var data = $("#myForm").serialize({
    checkboxesAsBools: true
});

console.log(data);

// name=Car&isProgrammer=true&isDesigner=false&gender=male&description=qweqwe

O con serializeArray:

var data = $("#myForm").serializeArray({
    checkboxesAsBools: true
});

console.log(data);

/*
[
   {
      "name":"name",
      "value":"Car"
   },
   {
      "name":"isProgrammer",
      "value":true
   },
   {
      "name":"isDesigner",
      "value":false
   },
   {
      "name":"gender",
      "value":"male"
   },
   {
      "name":"description",
      "value":"qweqwe"
   }
]
*/

La ventaja de este enfoque es exactamente el hecho de que el comportamiento predeterminado de los métodos no se ve comprometido. Deberá especificar cuándo las casillas de verificación deben manejarse como booleanos en la serialización.

Que te diviertas ❤️!


Interesado en la programación desde los 14 años, Carlos es un programador autodidacta, fundador y autor de la mayoría de los artículos de Our Code World.

Conviertete en un programador más sociable

Patrocinadores