mandar valores de checkbox como arreglo mediante ajax

publicado por: Anonymous

hola tengo el siguiente problema.. necesito mandar los valores de un grupo de checkbox en un array, mediante ajax y procesarlos en php con codeigniter. estoy comenzando con ajax por lo que no se aun mucho del asunto, su aporte seria muy importante, tengo el siguiente codigo:

_x000D_

_x000D_

<form id="formid">_x000D_
  <input type="checkbox" value="1" name="page[]" class="up">_x000D_
  <input type="checkbox" value="2" name="page[]" class="up">_x000D_
  <input type="checkbox" value="3" name="page[]" class="up">_x000D_
  <input type="checkbox" value="4" name="page[]" class="up">_x000D_
  <input type="checkbox" value="5" name="page[]" class="up">_x000D_
  <a href="#" id="enviar" />Enviar</a>_x000D_
</form>_x000D_
_x000D_
_x000D_
<script type="text/javascript">_x000D_
$(document).ready(function() {_x000D_
    $('#enviar').click(function(){_x000D_
        var selected = '';    _x000D_
        $(":checkbox[name=page]").each(function(){_x000D_
            if (this.checked) {_x000D_
                selected += $(this).val()+', ';_x000D_
            }_x000D_
        }); _x000D_
        if (selected != '') _x000D_
            $.ajax({_x000D_
            cache: false,_x000D_
            type: 'post',_x000D_
            data: selected,_x000D_
            url: 'roles/paginas',_x000D_
            success: function(data){_x000D_
            alert('datos enviados');_x000D_
            }_x000D_
           }); _x000D_
        else_x000D_
            alert('Debes seleccionar al menos una opción.');_x000D_
_x000D_
        return false;_x000D_
    });         _x000D_
});    _x000D_
</script>

_x000D_

_x000D_

_x000D_

como puedo mandar los valores en un array y procesarlos en mi controlador en php

solución

Hay un error y otras cosas para mejorar en este código:

  1. El error: Donde pones los checkbox, usa name="page" en lugar de name="page[]" pues sino no encuentra lo que estas intentando buscar.

  2. Mejoras: Te conviene usar json para enviar los datos por ser un standard, es legible, ya hay formas robustas de generarlos y parsearlo, etc. Así que hice unos pequeños cambios que comente en el código para que puedas verlos.

El principal es usar dataType: "json" en la solicitud ajax ya que esto hace que se envie (y se reciba la respuesta, si la hay) estructurada y directo en forma de objetos sin tener que estar parseando manualmente.

El resto están comentadas en el código, como usar un Array en lugar de una cadena para armar el arreglo.

Salu2

_x000D_

_x000D_

$(document).ready(function() {_x000D_
  $('#enviar').click(function() {_x000D_
    // defines un arreglo_x000D_
    var selected = [];_x000D_
    $(":checkbox[name=page]").each(function() {_x000D_
      if (this.checked) {_x000D_
        // agregas cada elemento._x000D_
        selected.push($(this).val());_x000D_
      }_x000D_
    });_x000D_
    if (selected.length) {_x000D_
_x000D_
      $.ajax({_x000D_
        cache: false,_x000D_
        type: 'post',_x000D_
        dataType: 'json', // importante para que _x000D_
        data: selected, // jQuery convierta el array a JSON_x000D_
        url: 'roles/paginas',_x000D_
        success: function(data) {_x000D_
          alert('datos enviados');_x000D_
        }_x000D_
      });_x000D_
_x000D_
      // esto es solo para demostrar el json,_x000D_
      // con fines didacticos_x000D_
      alert(JSON.stringify(selected));_x000D_
_x000D_
    } else_x000D_
      alert('Debes seleccionar al menos una opción.');_x000D_
_x000D_
    return false;_x000D_
  });_x000D_
});

_x000D_

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<form id="formid">_x000D_
  <input type="checkbox" value="1" name="page" class="up">_x000D_
  <input type="checkbox" value="2" name="page" class="up">_x000D_
  <input type="checkbox" value="3" name="page" class="up">_x000D_
  <input type="checkbox" value="4" name="page" class="up">_x000D_
  <input type="checkbox" value="5" name="page" class="up">_x000D_
  <a href="#" id="enviar" />Enviar</a>_x000D_
</form>

_x000D_

_x000D_

_x000D_

Luego, para agarrar este arreglo en PHP necesitas hacer algo parecido a lo siguente:

// obtienes el cuerpo del POST
$entityBody = file_get_contents('php://input');

// decodificas el JSON
$data = json_decode($entityBody, true); // true es para recibir un array en $data

print_r($data); // ["1","2","3","4","5"] si estan todos seleccionados. 
Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *