Forum |  HardWare.fr | News | Articles | PC | Prix | S'identifier | S'inscrire | Aide | Shop Recherche
1815 connectés 

  FORUM HardWare.fr
  Programmation
  PHP

  Comment envoyer formulaire ajax en cochant checkbox?

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Comment envoyer formulaire ajax en cochant checkbox?

n°2304054
bingojm
Posté le 01-08-2017 à 14:12:27  profilanswer
 

Bonjour à tous,
 
Je cherche désespérément à envoyer un formulaire en ajax lorsque je coche une checkbox.
 
J'arrive à envoyer le formulaire sans problème en cliquant sur le bouton "envoi", mais j'aimerais faire disparaître celui-ci à terme et envoyer le formulaire à chaque fois qu'un checkbox est coché.
Je pense que j'y suis presque, mais je ne trouve pas la solution...
 
ma page principale:

Code :
  1. <head>
  2. <script language="javascript">
  3. function Valid(formulaire)
  4. {
  5.    formulaire.submit();
  6. }
  7. </script>
  8. </head>
  9. <body>
  10. <form action="process.php" id="contact" method="POST">
  11. <p><input type="checkbox" name="myCheckboxes[]" id="myCheckboxes" value="someValue1" onclick="Valid(this.form)" /></p>
  12. <p><input type="checkbox" name="myCheckboxes[]" id="myCheckboxes" value="someValue2" onclick="Valid(this.form)" /></p>
  13. <input type="submit" value="envoi" id="envoi" />
  14. <?php
  15.     include("recherche.php" );
  16. ?>
  17. <div id="calendrier"><div>         
  18. </form>


 
ma page recherche.php:

Code :
  1. <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
  2. <script>
  3.     $(function(){
  4.         $("#contact" ).submit(function(event){
  5.                 $.ajax({
  6.                     type : "POST",
  7.                     url: $(this).attr("action" ),
  8.     dataType : 'html', // On désire recevoir du HTML
  9.                     data: $(this).serialize(), //le formulaire est "sérializé"
  10.                     success : function(code_html, statut) {
  11.                         $("#calendrier" ).html(code_html);
  12.                     },
  13.                     error: function() {
  14.                         $("#calendrier" ).html("<p>Erreur d'appel, le formulaire ne peut pas fonctionner</p>" );
  15.                     }
  16.                 });
  17.             return false;
  18.         });
  19.     });
  20. </script>


 
merci d'avance!

mood
Publicité
Posté le 01-08-2017 à 14:12:27  profilanswer
 

n°2304057
SICKofitAL​L
Razoreater
Posté le 01-08-2017 à 14:50:32  profilanswer
 

En reprennant ton code, tu peux essayer :

Code :
  1. <head>
  2. </script>
  3. </head>
  4. <body>
  5. <form action="process.php" id="contact" method="POST">
  6. <p><input type="checkbox" name="myCheckboxes[]" id="myCheckboxes" value="someValue1" /></p>
  7. <p><input type="checkbox" name="myCheckboxes[]" id="myCheckboxes" value="someValue2" /></p>
  8. <input type="submit" value="envoi" id="envoi" />
  9. <?php
  10.     include("recherche.php" );
  11. ?>
  12. <div id="calendrier"><div>       
  13. </form>


 

Code :
  1. <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
  2.     <script>
  3. $ (function ()
  4.    {
  5.    $ ("#contact" ).submit (
  6.     function ()
  7.     {
  8.      $.ajax ({
  9.       type:     "POST",
  10.       url:      $ (this).attr ("action" ),
  11.       dataType: 'html',
  12.       data:     $ (this).serialize (),
  13.       success:  function (html)
  14.         {
  15.          $ ("#calendrier" ).html (html);
  16.         },
  17.       error:    function ()
  18.         {
  19.          $ ("#calendrier" ).html ("<p>Erreur d'appel, le formulaire ne peut pas fonctionner</p>" );
  20.         }
  21.      });
  22.      return false;
  23.     }
  24.    );
  25.    $ ('input[type=checkbox]').change (
  26.     function ()
  27.     {
  28.      $ ("#contact" ).submit ();
  29.     }
  30.    );
  31.    });
  32.     </script>


 
Utilises la console JavaScript (F12 sur Chrome ou Firefox) afin de voir les éventuelles erreurs qui te sont retournées ainsi que les échanges réseaux.


---------------
"And at the end it is only YOU, ME AND THE VIOLENCE !"
n°2304058
bingojm
Posté le 01-08-2017 à 14:59:11  profilanswer
 

1000 mercis SICKofitALL
Grâce à toi j'ai encore appris quelque chose.
J'avais bien  compris le principe, mais je n'arrivais pas à l'écrire...

n°2304535
eclairocho​cola
Posté le 12-08-2017 à 09:28:53  profilanswer
 

Alors par contre, c'est pas ton cas probablement, mais pour les évènements javascript, j'ai pris l'habitude de les écrires comme ça:
 
 
$ (document).on('submit', '#contact', function () {
  [....]
 
 
Le $ (document) permet d'écouter l'évènement sur tout le document. Et donc si tu a des éléments rajouter dynamiquement, les évènement se déclencheront quand même sur ceux-ci.

n°2304548
MaybeEijOr​Not
but someone at least
Posté le 12-08-2017 à 14:43:29  profilanswer
 

Comme tu le dis, ce n'est pas la même chose, tu écoutes sur tout le document puis une fois l'évènement déclenché tu vérifies que l'élément déclenchant correspond à celui que tu voulais vraiment écouter. Alors en effet ça permet de gérer un élément ajouté dynamiquement tout comme tu peux ajouter dynamiquement ton élément en lui assignant son propre EventListener. Mais cela conduit à des propagations différentes de l'évènement.
 
En gros toi tu proposes :

Code :
  1. document.addEventListener('submit', function(event) { event.target.id == id ? action() : event.preventDefault(); }, false);


Donc tu annules l'évènement quand l'élément déclencheur ne correspond pas à celui attendu.
 
Bref juste pour noter qu'il y a une légère différence qui ne jouera pas souvent.


---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  PHP

  Comment envoyer formulaire ajax en cochant checkbox?

 

Sujets relatifs
[Ajax] Checker le changement d'un paragraphe actualisé en ajaxACCESS 2010 – Requête de sélection à partir d’un formulaire
Transferer des données d’une table vers une autre table via checkboxFormulaire de contact et recaptcha de Google
AMP formulaire - Send Mail[RESOLU] PHP $_POST vide après envoi de formulaire
pb sauts de ligne $.ajaximage formulaire
Formulaire de calcul en HTML/JavaScriptChamps email en code qui renvoi vers formulaire d'inscription
Plus de sujets relatifs à : Comment envoyer formulaire ajax en cochant checkbox?



Copyright © 1997-2016 Hardware.fr SARL (Signaler un contenu illicite) / Groupe LDLC / Shop HFR