1

Quiero enviar por POST todos los valores de mi formulario usando serialize o serializeArray, incluyendo los checkbox que no estén seleccionados, pero descubro que estos dos métodos ignoran los checkbox que no estén seleccionados.

¿Hay alguna manera no demasiado forzosa de forzar la serialización de todos los checkboxes, incluyendo los no seleccionados?

$(
  function() {
    $("#frmPersonas").on("submit", function(e) {
      e.preventDefault();
      var form = $(this);
      var dataSerializeArray = form.serializeArray();
      var dataSerialize = form.serialize();
      console.log(dataSerialize);
      console.log(dataSerializeArray);
    });
  }
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Formulario simple que enviará una petición POST -->
<form id="frmPersonas" action="" method="post">
  <label for="POST-name">Nombre  :</label>
  <input id="POST-name" type="text" name="name" value="Prueba" /><br /> Uno:
  <input type="checkbox" name="chkUno" id="chkUno" checked /> <br /> Dos:
  <input type="checkbox" name="chkDos" id="chkDos" /> <br />
  <hr />
  <input type="submit" value="Enviar">
</form>

1

2 respuestas 2

3

no he usado serialize ya que no se muy bien que hace, pero espero que te sirva.

$(
  function() {
$("#frmPersonas").on("submit", function(e) {
  e.preventDefault();
  var form = $(this);
  var dataSerializeArray = form.serializeArray();
  var dataSerialize = form.serialize();

$("input[type='checkbox']").each(function(indice, inputDatos){
	if ($(inputDatos).is(":checked") === false){
			var objeto = new Object();
	objeto.name = inputDatos.id;
	objeto.value = "off"
	dataSerializeArray.push(objeto);
	}
		
})
  
  console.log(dataSerializeArray);
});
  }
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form id="frmPersonas" action="" method="post">
  <label for="POST-name">Nombre  :</label>
  <input id="POST-name" type="text" name="name" value="Prueba" /><br /> Uno:
  <input type="checkbox" name="chkUno" id="chkUno" checked /> <br /> Dos:
  <input type="checkbox" name="chkDos" id="chkDos" /> <br />
  <hr />
  <input type="submit" value="Enviar">
</form>

4
  • Interesante propuesta pero, dado que los chequeados ya los serializa, y tampoco quiero renunciar a serialize ¿no sería mejor aliviar el código, buscando los no chequeados solamente y añadirlos a la variable creada ya con serialize?
    – A. Cedano
    Commented el 27 abr. 2018 a las 12:49
  • He editado la respuesta para que solo se añada los check que no han sido marcados. Espero que te sirva
    – lDanny7
    Commented el 27 abr. 2018 a las 12:59
  • Buena respuesta. Como comentario, deberías hacer el selector de los input más concreto. Tal y como está ahora, se podrían seleccionar incluso input que están fuera del formulario. Poniendo un $(this).find(...) o simplemente el id del formulario al principio del selector evitará resultados inesperados.
    – Alvaro Montoro
    Commented el 27 abr. 2018 a las 13:10
  • Si estas en lo cierto que tendría que añadir quien es padre para que solo tenga en cuenta los que están dentro. Tu respuesta es mejor engloba todo y evita el if que añadi. Siempre se aprende algo nuevo
    – lDanny7
    Commented el 27 abr. 2018 a las 13:13
2

En jQuery podrías usar los que no estén seleccionados haciendo esto:

$("#frmPersonas input[type=checkbox]:not(:checked)")

o también así:

$("#frmPersonas input[type=checkbox]").not(":checked")

Cualquiera de esos dos métodos va a devolver una lista con los inputs que no hayan sido marcados. Una vez obtenidos, añadirlos a tus datos serializados requeriría sólo recorrer dicha lista (con un each por ejemplo) y concatenar o insertar dependiendo de si es una cadena o un array:

$(
  function() {
    $("#frmPersonas").on("submit", function(e) {
      e.preventDefault();
      var form = $(this);
      var dataSerializeArray = form.serializeArray();
      var dataSerialize = form.serialize();
      
      $("#frmPersonas input[type=checkbox]:not(:checked)").each(function() {
        dataSerializeArray.push({ "name": this.name, "value": "off" });
        dataSerialize += (dataSerialize.length > 0 ? "&" : "") + this.name + "=off";
      });
      
      console.log(dataSerialize);
      console.log(dataSerializeArray);
    });
  }
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Formulario simple que enviará una petición POST -->
<form id="frmPersonas" action="" method="post">
  <label for="POST-name">Nombre  :</label>
  <input id="POST-name" type="text" name="name" value="Prueba" /><br /> Uno:
  <input type="checkbox" name="chkUno" id="chkUno" checked /> <br /> Dos:
  <input type="checkbox" name="chkDos" id="chkDos" /> <br />
  <hr />
  <input type="submit" value="Enviar">
</form>

2
  • Álvaro me gusta tu respuesta. Pero ¿podrías explicar que sentido tiene el uso del operador ternario en el caso de dataSerialize?
    – A. Cedano
    Commented el 27 abr. 2018 a las 23:43
  • @A.Cedano Estaba intentando hacer una respuesta genérica que sirviera para cualquier formulario (si no se ha marcado ningún campo, la cadena estará vacía y tener un & podría dar error). Aunque en este caso no importa porque hay un campo de texto que siempre se serializará.
    – Alvaro Montoro
    Commented el 27 abr. 2018 a las 23:55

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.