Enviar múltiples datos de casilla de verificación a PHP a través de jQuery ajax()

Question

Deseo enviar un formulario POST que contenga un campo de texto y un campo de entrada (tipo = "casilla de verificación" con un número arbitrario/variable de casillas de verificación) en mi sitio web a través de jQuery's .ajax(). PHP recibe los datos de texto y la respuesta ajax se muestra correctamente al usuario. Sin embargo, parece que PHP no está recibiendo los datos de la casilla de verificación (se verificó, o no). ¿Cómo puedo hacer que esto funcione? Aquí está el código que tengo:

El HTML:

<form method="post" action="myurl.php" id=myForm> 
    <textarea id="myField" type="text" name="myField"></textarea> 
    <input type="checkbox" name="myCheckboxes[]" id="myCheckboxes" value="someValue1" /> 
    <input type="checkbox" name="myCheckboxes[]" id="myCheckboxes" value="someValue2" /> 
    ...(maybe some more checkboxes - dynamically generated as necessary) 
    <input id="submit" type="submit" name="submit" value="Submit" onclick="submitForm()" /> 
</form> 

El jQuery:

function submitForm() { 
$(document).ready(function() { 
$("form#myForm").submit(function() { 

     var myCheckboxes = new Array(); 
     $("input:checked").each(function() { 
      myCheckboxes.push($(this).val()); 
     }); 

     $.ajax({ 
      type: "POST", 
      url: "myurl.php", 
      dataType: 'html', 
      data: { myField:$("textarea[name=myField]").val(), 
        myCheckboxes:myCheckboxes }, 
      success: function(data){ 
       $('#myResponse').html(data) 
      } 
     }); 
     return false; 
}); 
}); 

Ahora, el PHP

$myField = htmlspecialchars($_POST['myField'])); 
if(isset($_POST['myCheckboxes'])) 
{ 
    for ($i=0; $i < count($_POST['myCheckboxes']); $i++) 
    { 
     // do some stuff, save to database, etc. 
    } 
} 
// create the response 
$response = 'an HTML response'; 
$response = stripslashes($response); 
echo($response); 

Todo funciona muy bien: cuando la forma es Envié un nuevo registro que se almacena en mi base de datos, la respuesta se devuelve a la página web, pero los datos de la casilla de verificación no se envían. Quiero saber cuál, si alguna, de las casillas de verificación ha sido marcada. He leído sobre .serialize(), JSON, etc., pero ninguno ha funcionado. ¿Debo serializar/JSON en jQuery y PHP? ¿Cómo? ¿Un método es mejor que otro al enviar datos de formulario con casillas de verificación? Estuve estancado en esto por 2 días. Cualquier ayuda sería muy apreciada. Gracias de antemano!

Answer 1

var myCheckboxes = new Array(); 
$("input:checked").each(function() { 
    data['myCheckboxes[]'].push($(this).val()); 
}); 

Usted está empujando casillas de verificación a la matriz equivocada data['myCheckboxes[]'] en lugar de myCheckboxes.push

Answer 2

Sí que es un trabajo bastante con jquery.serialize()

HTML

<form id="myform" class="myform" method="post" name="myform"> 
<textarea id="myField" type="text" name="myField"></textarea> 
<input type="checkbox" name="myCheckboxes[]" id="myCheckboxes" value="someValue1" /> 
<input type="checkbox" name="myCheckboxes[]" id="myCheckboxes" value="someValue2" /> 
<input id="submit" type="submit" name="submit" value="Submit" onclick="return submitForm()" /> 
</form> 
<div id="myResponse"></div> 

jQuery

function submitForm() { 
var form = document.myform; 

var dataString = $(form).serialize(); 


$.ajax({ 
    type:'POST', 
    url:'myurl.php', 
    data: dataString, 
    success: function(data){ 
     $('#myResponse').html(data); 


    } 
}); 
return false; 
} 

Ahora el PHP, puedo exportar los datos POST

echo var_export($_POST); 

Se puede ver el valor de todas las casillas de verificación son sent.I espero que le puede ayudar a

Answer 3

El código que tiene en este momento parece ser todo derecho. Compruebe qué contiene la matriz de casillas de verificación con esto. Agregue este código en la parte superior de su script php y vea si las casillas de verificación se pasan a su secuencia de comandos.

echo '<pre>'.print_r($_POST['myCheckboxes'], true).'</pre>'; 
exit; 

Answer 4

Mira esto.

<script type="text/javascript"> 
    function submitForm() { 
$(document).ready(function() { 
$("form#myForm").submit(function() { 

     var myCheckboxes = new Array(); 
     $("input:checked").each(function() { 
      myCheckboxes.push($(this).val()); 
     }); 

     $.ajax({ 
      type: "POST", 
      url: "myurl.php", 
      dataType: 'html', 
      data: 'myField='+$("textarea[name=myField]").val()+'&myCheckboxes='+myCheckboxes, 
      success: function(data){ 
       $('#myResponse').html(data) 
      } 
     }); 
     return false; 
}); 
}); 
} 
</script> 

Y en myurl.php puede utilizar print_r($_POST['myCheckboxes']);

Answer 5

$.post("test.php", { 'choices[]': ["Jon", "Susan"] }); 

así que sólo iterar sobre las casillas marcadas y construir la matriz. Algo como.

 var data = { 'user_ids[]' : []}; 
     $(":checked").each(function() { 
     data['user_ids[]'].push($(this).val()); 
     }); 
     $.post("ajax.php", data); 

Answer 6

También puede probar esto,

var arr = $('input[name="myCheckboxes[]"]').map(function(){ 
    return $(this).val(); 
}).get(); 

console.log(arr);