Comment envoyer formulaire ajax en cochant checkbox?

Comment envoyer formulaire ajax en cochant checkbox? - PHP - Programmation

Marsh Posté le 01-08-2017 à 14:12:27    

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>
  3. <script language="javascript">
  4. function Valid(formulaire)
  5. {
  6.    formulaire.submit();
  7. }
  8. </script>
  10. </head>
  12. <body>
  14. <form action="process.php" id="contact" method="POST">
  15. <p><input type="checkbox" name="myCheckboxes[]" id="myCheckboxes" value="someValue1" onclick="Valid(this.form)" /></p>
  16. <p><input type="checkbox" name="myCheckboxes[]" id="myCheckboxes" value="someValue2" onclick="Valid(this.form)" /></p>
  18. <input type="submit" value="envoi" id="envoi" />
  20. <?php
  21.     include("recherche.php" );
  22. ?>
  24. <div id="calendrier"><div>         
  26. </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){
  6.                 $.ajax({
  7.                     type : "POST",
  8.                     url: $(this).attr("action" ),
  9.     dataType : 'html', // On désire recevoir du HTML
  10.                     data: $(this).serialize(), //le formulaire est "sérializé"
  11.                     success : function(code_html, statut) {
  12.                         $("#calendrier" ).html(code_html);
  13.                     },
  14.                     error: function() {
  15.                         $("#calendrier" ).html("<p>Erreur d'appel, le formulaire ne peut pas fonctionner</p>" );
  16.                     }
  17.                 });
  19.             return false;
  20.         });
  21.     });
  22. </script>


 
merci d'avance!

Message cité 1 fois
Reply

Marsh Posté le 01-08-2017 à 14:12:27   

Reply

Marsh Posté le 01-08-2017 à 14:50:32    

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.    );
  26.    $ ('input[type=checkbox]').change (
  27.     function ()
  28.     {
  29.      $ ("#contact" ).submit ();
  30.     }
  31.    );
  32.    });
  33.     </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.


---------------
We deserve everything that's coming...
Reply

Marsh Posté le 01-08-2017 à 14:59:11    

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

Reply

Marsh Posté le 12-08-2017 à 09:28:53    

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.

Reply

Marsh Posté le 12-08-2017 à 14:43:29    

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

Marsh Posté le 08-09-2017 à 18:18:46    

bingojm a écrit :

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>
  3. <script language="javascript">
  4. function Valid(formulaire)
  5. {
  6.    formulaire.submit();
  7. }
  8. </script>
  10. </head>
  12. <body>
  14. <form action="process.php" id="contact" method="POST">
  15. <p><input type="checkbox" name="myCheckboxes[]" id="myCheckboxes" value="someValue1" onclick="Valid(this.form)" /></p>
  16. <p><input type="checkbox" name="myCheckboxes[]" id="myCheckboxes" value="someValue2" onclick="Valid(this.form)" /></p>
  18. <input type="submit" value="envoi" id="envoi" />
  20. <?php
  21.     include("recherche.php" );
  22. ?> https://lc.cx/ctn4http://k6.re/UEKMEhttp://bit.ly/2f8vrX8
  24. <div id="calendrier"><div>         
  26. </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){
  6.                 $.ajax({
  7.                     type : "POST",
  8.                     url: $(this).attr("action" ),
  9.     dataType : 'html', // On désire recevoir du HTML
  10.                     data: $(this).serialize(), //le formulaire est "sérializé"
  11.                     success : function(code_html, statut) {
  12.                         $("#calendrier" ).html(code_html);
  13.                     },
  14.                     error: function() {
  15.                         $("#calendrier" ).html("<p>Erreur d'appel, le formulaire ne peut pas fonctionner</p>" );
  16.                     }
  17.                 });
  19.             return false;
  20.         });
  21.     });
  22. </script>


 
merci d'avance!


Onclick sur le bouton ?


---------------
Techno-science.net: Actualité des sciences et techniques
Reply

Marsh Posté le 08-09-2017 à 18:25:53    

La réponse a déjà été donnée, de plus il était question ici de checkbox et non d'un bouton. Et comme dit, l'évènement associé à la modification d'une checkbox est l'évènement "change" (onChange).


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

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed