Envoyer plusieurs données de case à cocher à PHP via jQuery ajax()
je veux soumettre un formulaire de poste qui contient un champ textarea et un champ(s) d'entrée (type="checkbox" avec un nombre de cases à cocher arbitraire/variable) sur mon site web via jquery's.Ajax.)( PHP reçoit les données textarea et la réponse ajax est correctement affichée à l'utilisateur. Cependant, il semble que PHP ne reçoit pas les données de la case à cocher (qu'elles aient été vérifiées ou non). Comment puis-je obtenir que cela fonctionne? Voici le code que j'ai:
the 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>
le 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;
});
});
maintenant, le 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);
Tout fonctionne très bien: lorsque le formulaire est soumis un nouvel enregistrement est stocké dans ma base de données, la réponse est ajaxée à la page Web, mais les données de case à cocher ne sont pas envoyés. Je veux savoir lesquelles, le cas échéant, des cases à cocher ont été vérifiées. J'ai lu à ce sujet .serialize (), JSON, etc, mais aucun cela n'a fonctionné. Dois-je sérialiser/JSON en jQuery et PHP? Comment? Est une méthode meilleure que l'autre lors de l'envoi des données du formulaire avec des cases à cocher? Je suis coincé là-dessus depuis 2 jours. Toute aide serait grandement appréciée. Merci à l'avance!
6 réponses
var myCheckboxes = new Array();
$("input:checked").each(function() {
data['myCheckboxes[]'].push($(this).val());
});
vous poussez les cases à cocher sur le mauvais tableau data['myCheckboxes[]'] au lieu de myCheckboxes.push
Oui c'est du joli travail avec 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;
}
maintenant le PHP, j'exporte les données POST
echo var_export($_POST);
vous pouvez voir toute la valeur de la case à cocher est envoyée.J'espère que ça peut vous aider
Vérifier cela.
<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>
Et sur myurl.php, vous pouvez utiliser print_r($_POST['myCheckboxes']);
$.post("test.php", { 'choices[]': ["Jon", "Susan"] });
donc je voudrais juste itérer au-dessus des boîtes cochées et construire le tableau. Quelque chose comme.
var data = { 'user_ids[]' : []};
$(":checked").each(function() {
data['user_ids[]'].push($(this).val());
});
$.post("ajax.php", data);
Le code que vous avez à l'heure actuelle semble être tout droit. Vérifiez ce que contient le tableau checkbox en utilisant ceci. Ajoutez ce code sur le dessus de votre script php et voyez si les cases à cocher sont passées à votre script.
echo '<pre>'.print_r($_POST['myCheckboxes'], true).'</pre>';
exit;
Vous pouvez aussi essayer ceci,
var arr = $('input[name="myCheckboxes[]"]').map(function(){
return $(this).val();
}).get();
console.log(arr);