web-dev-qa-db-fra.com

Envoyer plusieurs données de case à cocher à PHP via jQuery ajax ()

Je souhaite soumettre un POST contenant un champ de zone de texte et un ou des champs de saisie (type = "case à cocher" avec un nombre arbitraire/variable de cases à cocher) sur mon site Web via .ajax de jQuery (). PHP reçoit les données de la zone de texte et la réponse ajax s'affiche correctement pour l'utilisateur. Cependant, il semble que PHP ne reçoit pas les données de la case à cocher ( a-t-il été vérifié ou non?) Comment puis-je faire fonctionner cela? Voici le code que j'ai:

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

La 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 réadaptée à la page Web, mais les données de la case à cocher ne sont pas envoyées. Je souhaite savoir, le cas échéant, quelles cases ont été cochées. J'ai lu sur .serialize (), JSON, etc, mais rien de tout cela n'a fonctionné. Dois-je sérialiser/JSON en jQuery et PHP? Comment? Une méthode est-elle meilleure qu'une autre lors de l'envoi de données de formulaire avec des cases à cocher? Je suis coincé là-dessus depuis 2 jours. Toute aide serait grandement appréciée. Merci d'avance!

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

Vous poussez les cases à cocher vers un mauvais tableau data['myCheckboxes[]'] au lieu de myCheckboxes.Push

22
sbczk

Oui, ça marche assez 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 toutes les valeurs de la case à cocher envoyées.J'espère que cela peut vous aider

31
Winn Minn Soe

Regarde ça.

<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']);

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

Je voudrais donc simplement parcourir les cases cochées et créer le tableau. Quelque chose comme.

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

Le code que vous avez en ce moment semble être correct. Vérifiez ce que le tableau de cases à cocher contient en utilisant ceci. Ajoutez ce code en haut de votre script php et voyez si les cases à cocher sont transmises à votre script.

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

Vous pouvez également essayer ceci,

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

console.log(arr);
0
SagarPPanchal