Envío de checkboxes o selector multiple por AJAX con jQuery

10:08 manu 2 Comments

Pasar parámetros de un formulario mediante las llamadas ajax que proporciona jQuery resulta realmente sencillo. Pero ¿qué pasa si queremos enviar un conjunto de checkboxes? ¿y si queremos enviar varias opciones seleccionadas de un selector múltiple? Pues la solución es igual de sencilla: Serializar. Con una pequeña función podemos serializar estos datos para enviarlos todos juntos como parametro. Aquí podéis ver el código:

PAGINA.PHP
<select id="selector" multiple>
 <option value="1">Uno</option>
 <option value="2">Dos</option>
 <option value="3">Tres</option>
</select>
<input id="opcion1" name="opciones[]" type="checkbox" value="1" />Opcion 1
<input id="opcion2" name="opciones[]" type="checkbox" value="2" />Opcion 2
<input id="opcion3" name="opciones[]" type="checkbox" value="3" />Opcion 3

JS.JS
var listaValoresSelector = $("#selector :selected").map(function () {
 return this.value;
}).get();
var listaValoresCheckboxes = $("input[name='opciones[]']:checked").map(function () {
 return this.value;
}).get();
$.ajax("app/ajax/miajax.php", { 
 lista1: listaValoresSelector,
 lista2: listaValoresCheckboxes ,
 ...
 function(data){
  ...
 }
);

MIAJAX.PHP
$lista1 = $_GET['lista1'];
$lista2 = $_GET['lista2'];

foreach ($lista1 as $opcionId){
 echo "Opcion seleccionada:".$opcionId;
} 
foreach ($lista2 as $opcionId){
 echo "Opcion seleccionada:".$opcionId;
}

Pues así de sencillo. Si tenéis cualquier duda o aporte, será más que bienvenido :)

2 comentarios:

  1. Hola, tengo problemas al enviar el contenido de un select_ "" a una web ya que al hacer el post la variables se pierden y el php q deberia recibir el conjunto de datos no recibe nada. Con Ajax. Hay solucion?? saludos jose de chile

    ResponderEliminar
    Respuestas
    1. Hola Jose, necesitaría algo más de información para ayudarte. ¿Puedes pegar tu código? (el select, la función ajax y el PHP que recibe la llamada). Un saludo !

      Eliminar