web-dev-qa-db-fra.com

Comment passer plusieurs cases à cocher en utilisant jQuery ajax post

Comment passer plusieurs cases à cocher en utilisant jQuery ajax post

c'est la fonction ajax

 function submit_form(){
 $.post("ajax.php", {
 selectedcheckboxes:user_ids,
 confirm:"true"
 },
 function(data){
  $("#lightbox").html(data);
  });
 }

et c'est ma forme

<form>
<input type='checkbox' name='user_ids[]' value='1'id='checkbox_1' />
<input type='checkbox' name='user_ids[]' value='2'id='checkbox_2' />
<input type='checkbox' name='user_ids[]' value='3'id='checkbox_3' />
<input name="confirm" type="button" value="confirm" onclick="submit_form();" />
</form>
javascriptjqueryhtmlajax
26
ahmed

À partir de la documentation jQuery pour POST ( 3ème exemple ):

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

Je voudrais donc simplement parcourir les cases 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);
46
Paul Tarjan

Je viens de découvrir cela en essayant de trouver une solution au même problème. Mise en œuvre de la solution de Paul, j'ai apporté quelques modifications pour que cette fonction fonctionne correctement.

var data = { 'venue[]' : []};

$("input:checked").each(function() {
   data['venue[]'].Push($(this).val());
});

En bref, l'ajout de input: coché par opposition à: coché limite les champs saisis dans le tableau à seulement les cases à cocher du formulaire. Paul est en effet correct avec this devant être inclus en tant que $(this) 

14
simnom

Pourrait utiliser ce qui suit et ensuite exploser la post result explode(",", $_POST['data']); pour donner un tableau de résultats.

var data = new Array();
$("input[name='checkBoxesName']:checked").each(function(i) {
    data.Push($(this).val());
});
10
Phil Jackson

Voici un moyen plus souple.

disons que ceci est votre formulaire.

<form>
<input type='checkbox' name='user_ids[]' value='1'id='checkbox_1' />
<input type='checkbox' name='user_ids[]' value='2'id='checkbox_2' />
<input type='checkbox' name='user_ids[]' value='3'id='checkbox_3' />
<input name="confirm" type="button" value="confirm" onclick="submit_form();" />
</form>

Et voici votre jquery ajax ci-dessous ...

                // Don't get confused at this portion right here
                // cuz "var data" will get all the values that the form
                // has submitted in the $_POST. It doesn't matter if you 
                // try to pass a text or password or select form element.
                // Remember that the "form" is not a name attribute
                // of the form, but the "form element" itself that submitted
                // the current post method
                var data = $("form").serialize(); 

                $.ajax({
                    url: "link/of/your/ajax.php", // link of your "whatever" php
                    type: "POST",
                    async: true,
                    cache: false,
                    data: data, // all data will be passed here
                    success: function(data){ 
                        alert(data) // The data that is echoed from the ajax.php
                    }
                });

Et dans votre ajax.php, vous essayez d’écrire ou d’imprimer votre message pour voir ce qui se passe à l’intérieur. Cela devrait ressembler à ceci. Seules les cases que vous avez cochées seront retournées. Si vous n'en avez coché aucune, une erreur sera renvoyée.

<?php 
    print_r($_POST); // this will be echoed back to you upon success.
    echo "This one too, will be echoed back to you";

J'espère que c'est assez clair.

5
Adrian Fernando Alconera

Si vous n'êtes pas prêt à lancer votre propre solution, consultez ce plugin jQuery:

malsup.com/jquery/form/

Il fera cela et plus pour vous. C'est fortement recommandé.

2
Gabriel Hurley

Les suivants de Paul Tarjan a travaillé pour moi,

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

mais j'avais plusieurs formulaires sur ma page et il a tiré les cases cochées de tous les formulaires, j'ai donc apporté la modification suivante pour qu'il ne soit extrait que d'un seul formulaire,

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

Remplacez simplement nom_de_votre_formulaire par le nom de votre formulaire.

Je mentionnerai également que si un utilisateur ne coche aucune case, aucun tableau n'est publié en PHP. J'avais besoin de savoir si un utilisateur a décoché toutes les cases, alors j'ai ajouté ce qui suit au formulaire,

<input style="display:none;" type="checkbox" name="user_ids[]" value="none" checked="checked"></input>

De cette façon, si aucune case n'est cochée, le tableau sera toujours défini avec la valeur "none".

1
Mike

Ce serait mieux et facile

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

console.log(arr);
0
SagarPPanchal