Bouton radio et rafraîchissement

Eléphant du PHP | 185 Messages

27 mars 2007, 23:26

Bonjour,

j'ai un formulaire avec trois boutons radio, que nous appelerons :

Choix A
Choix B
Choix C

Pour le choix C nous avons trois autres boutons radio appelés :

Choix C 1
Choix C 2
Choix C 3

Le but de la manoeuvre est le suivant :

- Si le choix A est coché, les choix B et C sont décochés
- Même chose pour si les choix B ou C sont décochés

Jusque là, pas de soucis, je sais qu'il suffit de nommer les trois boutons radio de la même façon.

Là où ça se complique, j'aimerai que lorsque le choix C est coché, par défaut le choix C 1 le soit aussi. Il faudrait aussi que je parvienne à faire en sorte que, lorsque le choix A ou B sont sélectionnés, les options C1, C2 et C3 se décochent.

par conqéquent, si je ne dis pas de bêtises, il faudrait, lorsque le choix C est coché, que la page soit rafraîchie.

En l'état mon formulaire ressemble à ça :
<form method="post" action="">

	<fieldset>
		<legend>Formulaire</legend>

			<label>Choix A : <input type="radio" name="choix" value="a" /></label><br />
			
			<label>Choix B : <input type="radio" name="choix" value="b" /></label><br />
			
			<label>Choix C : <input type="radio" name="choix" value="c" /></label>

			<label>c 1 : <input type="radio" name="choix" value="c1" checked="checked" /></label>
			
			<label>c 2 : <input type="radio" name="choix" value="c2" /></label>
			
			<label>c 3 : <input type="radio" name="choix" value="c3" /></label><br />

			<label><input type="submit" value="valider" /></label>

	</fieldset>

</form>
Evidemment ça ne fonctionne pas comme je le voudrais. C'est à dire qu'il faudrait que je puisse indiquer au formulaire que quel que soit le choix sélectionné, la page soit rechargée en passant en post la valeur "checked" sur le bouton sélectionné. Seulement je ne sais pas comment rafraîchir la page lorsqu'un bouton radio est coché sans être obligé de cliquer sur le bouton "submit".

Voilà, si quelqu'un a une solution à m'apporter, même un indice, mes ouïes, et surtout mes mirettes, sont grandes ouvertes ! :)

Avatar du membre
Modérateur PHPfrance
Modérateur PHPfrance | 10684 Messages

28 mars 2007, 00:37

Tu peux aussi regarder du côté de javascript pour éviter de recharger la page, le clique sur un bouton radio pouvant entrainer l'activation ou la désactivation de la 2nd série, tout comme la sélection de valeurs.

Ceci dit, il te faut dans tous les cas créer deux groupes de boutons radio distincts. En effet, tu ne pourras jamais cocher de radio qui ont le même attribut name (donc C et Cx)

A partir de là, et avec un peu de javascript malgré tout, il suffit effectivement de soumettre le formulaire lorsque l'on clique l'un des éléments du premier groupe de radios (A, B ou C) et avec php de cocher les champs qui vont bien avec l'attribut checked :)
<input type="radio" ... onClick="this.form.submit();" />
Ce n'est pas en améliorant la bougie que l'on a inventé l'ampoule...

Eléphant du PHP | 185 Messages

28 mars 2007, 00:51

Je craignais une réponse de ce style...

J'aurai aimé me passer du JavaScript, mais j'ai pas mal parcouru le forum à la recherche d'une solution, et tout ce que j'ai pu trouver se rapprochant de mon problème m'a imposé cette conclusion : "Petit scarabée, commence par apprendre le JavaScript"... :D

Merci de ta réponse, je vais chercher de ce côté ! :)

Avatar du membre
Modérateur PHPfrance
Modérateur PHPfrance | 10684 Messages

28 mars 2007, 08:44

Ben disons que le javascript est quand même super agréable pour l'utilisateur qui n'a pas besoin d'attendre que sa page se recharge à chaque fois qu'il clique quelque part. Ceci dit, tu peux te servir du minimum indiqué ci-dessus pour recharger la page et gérer les coches en php :)

Le javascript permet d'accéder aux éléments de ta page via la hierarchie du DOM (document object model) c'est à dire la structure de ta page :
window est le plus haut élément, c'est ta fenêtre. Dans window on trouve l'élément document, dans lequel on pourra trouver les éléments "form" des formulaires etc. et ainsi modifier valeur et attributs dynamiquement

Dans le onClick="" de ton bouton radio, l'instruction est donc
this : l'élément courrant, donc le bouton radio en question
this.form : le formulaire de l'élément courrant
this.form.submit() : appel à la méthode submit du formulaire

Ca soumet donc le formulaire comme si tu cliquais sur un bouton submit à chaque fois que tu cliquera sur ce bouton radio :) Pas forcément besoin de plus de js puor commencer, mais c'est à toi de voir :)
Ce n'est pas en améliorant la bougie que l'on a inventé l'ampoule...

Mammouth du PHP | 543 Messages

28 mars 2007, 09:54

Et pour optimiser le tout, tu peux :
- Créer tes deux groupes de boutons distinct.
- Afficher un submit a coté de la premiere série de boutons radios.
- Au clic sur le submit tu recharges la page courante en traitant les données $_POST envoyées, afin d'afficher ou non la deuxième série, et les coches.

Ca c'était pour le cas utilisateur lamba sans javascript.
Pour les autres, ayant javascript,
- tu crées tafonctionjavascript qui selectionne/affiche/masque la deuxieme série en fonction de la premiere série de bouton
- tu mets un onclick='tafonctionjavascript' sur les boutons radio de la premiere série,
- tu mets un javascript dans la page passant le display du bouton submit de la premiere série a none, pour le masquer aux utilisateurs ayant javascript

Ainsi, tu as une page ergonomique et adequat pour plus de 90% des gens, et moins ergonomique et moins "pratique" mais tout autant fonctionnelle pour les autres.

@+

Invité
Invité n'ayant pas de compte PHPfrance

28 mars 2007, 21:35

Merci pour vos conseils, ça me paraît plus clair à présent... Il ne me reste plus qu'à mettre tout ça en pratique.

Je posterai le script dès que j'aurai quelquechose de fonctionnel ! :)

Eléphant du PHP | 185 Messages

28 mars 2007, 21:36

Désolé, j'ai oublié de me connecter avant de poster... C'est bien évidemment moi qui ai posté jute au-dessus.

Eléphant du PHP | 185 Messages

29 mars 2007, 00:48

Bien, j'ai testé différentes choses et je ne parviens toujours pas à un résultat très probant.

Voici notamment l'une des méthodes que j'ai essayé :
<?php
if (isset($_POST['choix']) && $_POST['choix'] == 'a') {
	$choixA = 'checked="checked"';
	$choixB = '' ;
	$choixC = '' ;
	$optionC1 = '';
	$optionC2 = '';
	$optionC3 = '';
}

if (isset($_POST['choix']) && $_POST['choix'] == 'b') {
	$choixA = '';
	$choixB = 'checked="checked"';
	$choixC = '';
	$optionC1 = '';
	$optionC2 = '';
	$optionC3 = '';
}

if (isset($_POST['choix']) && $_POST['choix'] == 'c') {
	$choixA = '' ;
	$choixB = '' ;
	$choixC = 'checked="checked"';
	$optionC1 = 'checked="checked"';
	$optionC2 = '';
	$optionC3 = '';
}

if (isset($_POST['option']) && $_POST['option'] == 'c1') {
	$choixA = '' ;
	$choixB = '' ;
	$choixC = 'checked="checked"';
	$optionC1 = 'checked="checked"';
	$optionC2 = '';
	$optionC3 = '';
}

if (isset($_POST['option']) && $_POST['option'] == 'c2') {
	$choixA = '' ;
	$choixB = '' ;
	$choixC = 'checked="checked"';
	$optionC1 = '';
	$optionC2 = 'checked="checked"';
	$optionC3 = '';
}

if (isset($_POST['option']) && $_POST['option'] == 'c3') {
	$choixA = '' ;
	$choixB = '' ;
	$choixC = 'checked="checked"';
	$optionC1 = '';
	$optionC2 = '';
	$optionC3 = 'checked="checked"';
}
?>

<form method="post" action="">

	<fieldset>
		<legend>Formulaire</legend>

			<label>Choix A : <input type="radio" name="choix"  value="a" onClick="this.form.submit();"
				<?php
					echo $choixA;
				?> />
			</label><br />
			
			<label>Choix B : <input type="radio" name="choix" value="b" onClick="this.form.submit();"
				<?php
					echo $choixB;
				?> />
			</label><br />
			
			<label>Choix C : <input type="radio" name="choix" value="c" onClick="this.form.submit();"
				<?php
					echo $choixC;
				?> />
			</label>

			<label>c 1 : <input type="radio" name="option" value="c1" onClick="this.form.submit();"
				<?php
					echo $optionC1;
				?> />
			</label>
			
			<label>c 2 : <input type="radio" name="option" value="c2" onClick="this.form.submit();"
				<?php
					echo $optionC2;
				?> />
			</label>
			
			<label>c 3 : <input type="radio" name="option" value="c3" onClick="this.form.submit();"
				<?php
					echo $optionC3;
				?> />
			</label><br />

			<label><input type="submit" value="valider" /></label>

	</fieldset>

</form>
Sous cette forme le script fonctionne à moitié. Tous les choix et toutes les options peuvent être cochées, malheureusement lorsque l'une des options ou le choix C sont sélectionnés, il n'est plus possible de sélectionner A ou B.

J'ai également testé le script en remplaçant le code du début (en fait toutes les instructions "if") par ceci :
$choixA = (isset($_POST['choix']) && $_POST['choix'] == 'a' ) ? 'checked="checked"' : '' ;
$choixB = (isset($_POST['choix']) && $_POST['choix'] == 'b' ) ? 'checked="checked"' : '' ;
$choixC = (isset($_POST['choix']) && $_POST['choix'] == 'c') ? 'checked="checked"' : '' ;
$optionC1 = (isset($_POST['option']) && $_POST['option'] == 'c1') ? 'checked="checked"' : '' ;
$optionC2 = (isset($_POST['option']) && $_POST['option'] == 'c2') ? 'checked="checked"' : '' ;
$optionC3 = (isset($_POST['option']) && $_POST['option'] == 'c3') ? 'checked="checked"' : '' ;
Avec ce code je n'obtiens toujours pas l'effet souhaité. Ce qui se passe dans ce cas là c'est qu'une fois qu'une option est sélectionnée, elle ne se décoche pas si l'on clique sur les choix A ou B.

La dernière chose qui me chagrine concerne l'événement onClick. Avec la méthode submit c'est tout le formulaire qui est envoyé, or ce n'est pas précisément l'effet que je souhaite obtenir. J'envisage en effet d'ajouter d'autres champs dans le formulaire, à la suite des boutons radio, qui eux ne devront pas être soumis lorsque'un des boutons radio sera cliqué. Dans l'immédiat ça ne pose pas de problème puisque je n'ai pas précisé la page que devait renvoyer le formulaire dans l'action de la balise form, mais lorsque celui-ci sera précisé (j'ai fait le test en indiquant action="index.php"), le fait d'employer la méthode submit basculera vers la page indiquée, et je n'aurai plus sous les yeux les boutons radio cochés ou décochés selon le choix opéré...

Bref, je ne sais pas si je suis parfaitement clair. Je l'espère ! :p

Peut-être devrais-je explorer la solution que propose Raptor, afficher/masquer la seconde série de boutons radio en fontion du choix effectué ; même si ce n'est pas exactement ce que je cherche à faire...

Je vais aller dormir, la nuit porte conseil ! :D