[AJAX] onchange dans input type radio

Version imprimable

Bonsoir ,

Je n’arrive pas à me faire à ajax js

Mon histoire, je fignole un logiciel d’évaluation, le problème est : que si l’on oublie d’enregistrer on perd toute l’évaluation.
Donc il faudrait que j’enregistre à chaque changement (onchange) d’un input type radio.
Il faudrait onchange ( valeur input, var1,var2,..).

Code:

1
2
3
4
5
$aff_page_html.= '<input type="radio" name="Aquis'.$ic.'"  id="radio1'.$ic.'" value="Aquis"  '.$checked_Aquis[$ic].'  class="css-checkbox" /> <label for="radio1'.$ic.'" class="css-label_VV "> Aquis </label>  
<input type="radio" name="Aquis'.$ic.'"  id="radio2'.$ic.'" value="P_Aquis"  '.$checked_P_Aquis[$ic].' class="css-checkbox" /> <label for="radio2'.$ic.'" class="css-label_V "> Partiellement Aquis </label>  
<input type="radio" name="Aquis'.$ic.'"  id="radio3'.$ic.'" value="E_C_Aquis"   '. $checked_E_C_Aquis[$ic].' class="css-checkbox" /> <label for="radio3'.$ic.'" class="css-label_orang "> En cours </label>  
<input type="radio" name="Aquis'.$ic.'"  id="radio4'.$ic.'" value="N_Aquis" '.$checked_N_Aquis[$ic].' class="css-checkbox" /> <label for="radio4'.$ic.'" class="css-label_red "> Non Aquis </label>  
<input type="radio" name="Aquis'.$ic.'"  id="radio5'.$ic.'" value="AN" class="css-checkbox" /> <label for="radio5'.$ic.'" class="css-label "> Annulation Eval</label>

Je pars du script

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
function enreg_auto_eval(valeur_radio , num_E, num_E2, num_C, num_P ){
obj = document.getElementById(js_code, page);
// ON EFFACE LE CONTENU DU DUV
obj.innerHTML = "";
//xhr_object.setRequestHeader("Cache-Control","no-cache");
 
if(window.XMLHttpRequest) // FIREFOX
xhr_object = new XMLHttpRequest();
else if(window.ActiveXObject) // IE
xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
else
return(false);
 
// CONTROLE DE LETAT DE LA REQUETE
// CHAQUE CHANGEMENT DETAT AFFICHE UNE LIGNE DANS NOTRE DIV
xhr_object.onreadystatechange = function(){
 
if(xhr_object.readyState == 4){
     // ON CONTROLE LE STATUS (ERREUR 404, ETC)
if(xhr_object.status == 200) 
obj.innerHTML +=  xhr_object.responseText;
else 
obj.innerHTML +="Error code " + xhr_object.status;
}
};
//alert(page);
 
// ON APPELLE LA PAGE
xhr_object.open("GET", "enreg_auto_eval.php?saut="+valeur_radio+"&Gnum_E="+Gnum_E+"&num_E2="+num_E2&Gnum_C="+num_C+"&Gnum_P="+num_P, true);
xhr_object.send(null);
}

je ne sais pas si je peux l’utiliser dans le cas que j’ai décris, si oui que dois-je mettre dans onchange (…..)

Merci pour votre aide sachant que je suis suis un néophyte en ajax et js.

Antoine

Il n'y a pas de comportement onchage sur des boutons radio.
Il faut mettre un comportement onclick sur chaque bouton radio.
Exemple avec jquery, tu peux tester tel quel, c'est fonctionnel. Tous les champs du formulaire seront envoyés vers "enreg_auto_eval.php".

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<meta charset="UTF-8" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	var formulaire = $('#form');
	var reponse = formulaire.find('#reponse');
	// Trouve tous les bouton radio et leur appliquent un comportement onclick
	formulaire.find("input[type=radio]").on('click',function()
	{
		// requête ajax avec serialize qui récupère tous les champs
		$.post("enreg_auto_eval.php", formulaire.serialize())
		// retour optionnel d'information
		.done(function(){reponse.text('sauvegarde automatique').css("display","block").fadeOut(800);})
		.fail(function(){reponse.text('echec de la sauvegarde automatique').css("display","block").fadeOut(800);})
	});
});
</script>
<form id="form" action="#" method="post">
    <input type="text" value="" name="texte" />
    <input type="text" value="" name="texte_2" />
 
    <input type='radio' name='type' value='1' />
    <input type='radio' name='type' value='2' />
    <input type='radio' name='type' value='3' />
 
    <input type='radio' name='genre' value='1' />
    <input type='radio' name='genre' value='2' />
    <input type='radio' name='genre' value='3' />  
 
    <input type="submit" name="envoyer" value="Envoyer"/>
    <div id = "reponse"></div>
</form>

Eventuellement tu pourrais faire pareil pour les champs de type text avec cette fois-ci le comportement onchange.

Bonsoir ABCIWEB,

Merci pour votre réponse, un autre coup de pouce sera le bienvenu.

Dans la page php, pourriez-vous me dire, si pour récupérer les données le code est bon car je n'enregistre rien.
Code:

1 2 3 4 5 6 7 8 9 10 <?php $formulaire = $_POST["formulaire"]; $donne_formulaire= unserialize(stripslashes(($formulaire))); $var1=$donne_formulaire[0] $var2=$donne_formulaire[1] $var3=$donne_formulaire[2] //ect. //enregistrement //Update ........ ?>
Et enfin (je l'espère) comment ré-afficher, en plus de la reponse.text('sauvegarde automatique'), un message de la page php sous le formulaire ?

Merci pour votre aide.

11/03/2015, 00h08
ABCIWEB

Bonjour,

Avec le code que j'ai donné en exemple dans mon précédent message, il n'y a pas besoin d'utiliser unserialize ni stripslalshes pour récupérer les données en php. Il suffit d'utiliser urdecode. Par exemple pour récupérer le champ de formulaire nommé "texte" :
$texte = urdecode($_POST['texte']); pour le champ nommé "genre" : $genre = urdecode($_POST['genre']);

A la fin du code php il suffit d'afficher quelque chose (par exemple echo "1") pour que la requête soit considérée comme réussie et que l'on soit diriger dans la condition "done" de la requête javascript et donc le message 'sauvegarde automatique' s'affichera pendant une petite seconde puis disparaîtra (à cause de la fonction "fadeOut" employée).
Il suffit de ne rien retourner depuis php pour être dirigé dans la condition "fail".

Bien entendu on pourrait renvoyer d'autres données depuis php notamment des tableaux en utilisant json_encode();
12/03/2015, 21h51
Antoine13

Bonsoir ABCIWEB,

Un grand merci. L'adaptation à ma page n'a pas été facile du à des conflits entre Jqery, Ajax et JS et entre formulaires, mais après des heures... Ça marche.

Mais, puis-je encore profiter de vos exemples concis et fonctionnels.

En effet, je n'ai pas su renvoyer des messages d'erreurs (évaluation manquante, trimestre, ...ect.). Je n'ai pas trouver d'exemples suffisamment claires en rapport à mes faibles connaissances.

Pourriez-vous me donner quelles pistes ou mieux des exemples fonctionnels.

Dans tout les cas merci pour votre aide.
Antoine

Salut,

Comme dit plus haut la voix "royale" (qui permet le plus de choses) pour passer des variables de php vers javascript est d'utiliser json_encode qui demande un tableau comme argument. On peut ainsi dissocier l'affichage.

Un exemple qui fait appel au fichier php nommé "test_ajax_php.php" décrit plus bas.

(appuie sur le bouton envoyer après avoir créer les deux fichiers et renseigné quelques champs du formulaire)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<meta charset="UTF-8" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
 
	var formulaire = $('#form');
	var reponse1 = formulaire.find('#reponse1');
	var reponse2 = formulaire.find('#reponse2');
	var reponse3 = formulaire.find('.post');
 
	// intercepte le comportement onsubmit (donc à la soumission du formulaire avec un bouton submit)
	formulaire.on('submit',function(event)
	{
		// Empêche la soumission du formulaire puisqu'on le fait en ajax vers "test_ajax_php.php"
		event.preventDefault();
 
		//On réinitialise les blocs en les vidant
		reponse1.empty();
		reponse2.empty();
		reponse3.empty();
 
		// requête ajax avec serialize qui récupère tous les champs
		$.post("test_ajax_php.php", formulaire.serialize())
		// retour d'information (j'ai utilisé 'result' pour récupérer le tableau "$tab" de php mais j'aurai pu choisir 'toto')
		.done(function(result)
		{
			// On teste si les variables attendues sont définies (les index 'v1', 'v2' et 'post' sont les index du tableau "$tab" de php)
			var v_1 = result.v1 != undefined ?  result.v1 : null;
			var v_2 = result.v2 != undefined ?  result.v2 : null;
			// post est un tableau
			var p = result.post != undefined ?  result.post : null;
 
			// On passe les variables "simples" dans les span
			reponse1.text(v_1);
			reponse2.text(v_2);
 
			// on liste le tableau "post" qui contient le résultat du formulaire
			$.each(p, function(i,v)
			{
				// on écrit une ligne avec index = valeur
				var ligne = $('<p style="background:#EBFEEE">'+i+" = "+v+'</p>');
				// on ajoute cette ligne dans le div
				reponse3.append(ligne);
			})
 
		})
		.fail(function(){reponse3.text('echec de la requête')})
	});
});
</script>
<form id="form" action="#" method="post">
    <input type="text" value="" name="texte" />
    <input type="text" value="" name="texte_2" />
 
    <input type='radio' name='type' value='1' />
    <input type='radio' name='type' value='2' />
    <input type='radio' name='type' value='3' />
 
    <input type='radio' name='genre' value='1' />
    <input type='radio' name='genre' value='2' />
    <input type='radio' name='genre' value='3' />  
 
    <input type="submit" name="envoyer" value="Envoyer"/>
    <div>
        <span id = "reponse1" style="background: #DDF5FF"></span>
        <span id = "reponse2" style="background: #FEE7FE;"></span>
    </div>
    <div class = "post"></div>
</form>

contenu de "test_ajax_php.php"

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
<?php
header('Content-Type: application/json');
 
$variable_1 = 'variable 1';
 
$variable_2 = 'variable 2';
 
// je construis un tableau contenant deux variables simples "v1" et "v2" et une variable "post" contenant le tableau $_POST
$tab = array('v1' => $variable_1, 'v2' => $variable_2, 'post' => $_POST);
 
// on passe le tableau à javascript avec json_encode
echo json_encode($tab);
?>

Petit rectificatif sur mon précédent message : j'ai dit qu'on récupère les variables en php avec urldecode mais ce n'est pas utile. Sauf exception (j'en sort c'est pour cela que je me suis trompé) cette fonction n'est pas nécessaire et en général on peut faire simplement $genre = $_POST['genre']
Le cas particulier que j'ai rencontré est un peu long à expliquer et exceptionnel...

14/03/2015, 21h58
Antoine13

Bonsoir ABCIWEB,

Ça marche, UN GRAND MERCi. Pour vos exemples annotés et fonctionnels.
J’aurai bien d’autre questions mais se sera pour une autre fois.

Antoine