Invia più dati casella di controllo a PHP tramite jQuery ajax()

Question

Desidero inviare un modulo POST che contenga un campo textarea e un campo (i) di input (type = "checkbox" con un numero arbitrario/variabile di checkbox) sul mio sito web tramite jQuery's .ajax(). PHP riceve i dati textarea e la risposta ajax viene visualizzata correttamente all'utente. Tuttavia, sembra che PHP non stia ricevendo i dati della casella di controllo (è stato controllato o meno). Come posso farlo funzionare? Ecco il codice che ho:

Il codice 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> 

Il 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; 
}); 
}); 

Ora, il 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); 

Tutto funziona alla grande: quando la forma è inviato un nuovo record viene memorizzato nel mio database, la risposta viene restituita alla pagina Web, ma i dati della casella di controllo non vengono inviati. Voglio sapere quali, se ce ne sono, delle caselle di controllo sono state controllate. Ho letto di .serialize(), JSON, ecc., Ma nessuno ha funzionato. Devo serializzare/JSON in jQuery e PHP? Come? Un metodo è migliore di un altro quando si inviano i dati del modulo con le checkbox? Sono stato bloccato su questo per 2 giorni. Qualsiasi aiuto sarebbe molto apprezzato. Grazie in anticipo!

Answer 1

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

State spingendo caselle di controllo per Array errata data['myCheckboxes[]'] invece di myCheckboxes.push

Answer 2

Sì è abbastanza lavoro 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; 
} 

ORA LA PHP, esporto i dati POST

echo var_export($_POST); 

Potete vedere il tutto il valore casella di controllo sono sent.I spero che può aiutare a

Answer 3

Il codice si ha in questo momento sembra essere tutto destra. Controlla cosa contiene la casella di controllo usando questo. Aggiungi questo codice nella parte superiore del tuo script php e vedi se le caselle di controllo vengono passate al tuo script.

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

Answer 4

Controllare questo.

<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> 

E su myurl.php è possibile utilizzare print_r($_POST['myCheckboxes']);

Answer 5

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

Quindi vorrei solo un'iterazione sulle caselle selezionate e costruire l'array. Qualcosa di simile a.

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

Answer 6

Si può anche provare questo,

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

console.log(arr);