PHP

Comment envoyer formulaire ajax en cochant checkbox?

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Comment envoyer formulaire ajax en cochant checkbox?

bingojm

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 :

<head>
<script language="javascript">
function Valid(formulaire)
{
formulaire.submit();
}
</script>
</head>
<body>
<form action="process.php" id="contact" method="POST">
<p><input type="checkbox" name="myCheckboxes[]" id="myCheckboxes" value="someValue1" onclick="Valid(this.form)" /></p>
<p><input type="checkbox" name="myCheckboxes[]" id="myCheckboxes" value="someValue2" onclick="Valid(this.form)" /></p>
<input type="submit" value="envoi" id="envoi" />
<?php
include("recherche.php" );
?>
<div id="calendrier"><div>
</form>

ma page recherche.php:

Code :

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(function(){
$("#contact" ).submit(function(event){
$.ajax({
type : "POST",
url: $(this).attr("action" ),
dataType : 'html', // On désire recevoir du HTML
data: $(this).serialize(), //le formulaire est "sérializé"
success : function(code_html, statut) {
$("#calendrier" ).html(code_html);
},
error: function() {
$("#calendrier" ).html("<p>Erreur d'appel, le formulaire ne peut pas fonctionner</p>" );
}
});
return false;
});
});
</script>

merci d'avance!

Message cité 1 fois

Publicité

SICKofitALL

misanthrope

En reprennant ton code, tu peux essayer :

Code :

<head>
</script>
</head>
<body>
<form action="process.php" id="contact" method="POST">
<p><input type="checkbox" name="myCheckboxes[]" id="myCheckboxes" value="someValue1" /></p>
<p><input type="checkbox" name="myCheckboxes[]" id="myCheckboxes" value="someValue2" /></p>
<input type="submit" value="envoi" id="envoi" />
<?php
include("recherche.php" );
?>
<div id="calendrier"><div>
</form>

Code :

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$ (function ()
{
$ ("#contact" ).submit (
function ()
{
$.ajax ({
type: "POST",
url: $ (this).attr ("action" ),
dataType: 'html',
data: $ (this).serialize (),
success: function (html)
{
$ ("#calendrier" ).html (html);
},
error: function ()
{
$ ("#calendrier" ).html ("<p>Erreur d'appel, le formulaire ne peut pas fonctionner</p>" );
}
});
return false;
}
);
$ ('input[type=checkbox]').change (
function ()
{
$ ("#contact" ).submit ();
}
);
});
</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...

bingojm

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

eclairochocola

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.

MaybeEijOrNot

but someone at least

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 :

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.

@ttil@

Q, retire ce bonnet !

bingojm a écrit :

Code :

<head>
<script language="javascript">
function Valid(formulaire)
{
formulaire.submit();
}
</script>
</head>
<body>
<form action="process.php" id="contact" method="POST">
<p><input type="checkbox" name="myCheckboxes[]" id="myCheckboxes" value="someValue1" onclick="Valid(this.form)" /></p>
<p><input type="checkbox" name="myCheckboxes[]" id="myCheckboxes" value="someValue2" onclick="Valid(this.form)" /></p>
<input type="submit" value="envoi" id="envoi" />
<?php
include("recherche.php" );
?>
<div id="calendrier"><div>
</form>

ma page recherche.php:

Code :

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(function(){
$("#contact" ).submit(function(event){
$.ajax({
type : "POST",
url: $(this).attr("action" ),
dataType : 'html', // On désire recevoir du HTML
data: $(this).serialize(), //le formulaire est "sérializé"
success : function(code_html, statut) {
$("#calendrier" ).html(code_html);
},
error: function() {
$("#calendrier" ).html("<p>Erreur d'appel, le formulaire ne peut pas fonctionner</p>" );
}
});
return false;
});
});
</script>

merci d'avance!

Onclick sur le bouton ?

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

MaybeEijOrNot

but someone at least

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.

FORUM HardWare.fr

Programmation

PHP

Comment envoyer formulaire ajax en cochant checkbox?

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

Page générée en 0.094 secondes