formulaires, événement onclick

03 avr. 2006, 12:28

Bonjour,

Je suis en train de faire un formulaire et celui-ci se divise en deux parties distinctes, l'utilisateur ne devant remplir que l'une de ces deux parties.

Pour expliquer plus facilement, je vais transposer mon problème sous forme de commande de pizza :
le client arrive sur le formulaire et a soit la possibilité de choisir une pizza dans une liste, soit la possibilité de "créer sa pizza". L'utilisateur rempli donc qu'une seule partie de son formulaire : soit il choisi une pizza, soit il en crée une.

Au début de chacune de mes deux parties se trouve un bouton radio, l'utilisateur choisi donc la partie qu'il va remplir : choix ou creation.

C'est ici que se situe ma question : je souhaiterais que l'événement "onclick" du bouton radio bloque tous les champs du formulaire de l'autre section.
Donc pour l'instant j'ai quelque chose qui ressemble à :

Code : Tout sélectionner

<input type="radio" name="pizza_action_choice" value="choose"  class="radio"
onclick="this.form.pizza_create_taille.disabled=true;
             this.form.pizza_create_tomate.disabled=true;
             this.form.pizza_create_jambon.disable=true;
             ...">Choix Pizza

Donc le onclick sur ce bouton radio désactive tous les champs de la seconde partie du formulaire pizza_create_*.
C'est justement ça que je veux faire, ne pas avoir à taper tous les noms des champs mais pouvoir dire this.form.pizza_create_*.disabled=true
Autrement dit, pouvoir désactiver en une ligne tous les champs dont le nom commence par "pizza_create".

Y'a-t-il une fonction me permettant de faire ceci facilement ?

Note : ha oui une autre question : vous pensez qu'il vaut mieux faire 2 formulaires pour ce genre de cas ? ou un seul formulaire ne gène pas vraiment ?

Merci d'avance pour les réponses.

03 avr. 2006, 12:52

TU pourrais procéder autrement : quatre parties dans ton formulaire.

Le choix "Toute faite"/"Personnalisée"
Un bloc div avec les champs pour la liste de choix de pizza existantes
Un bloc div avec les champs permettant de créer sa propre pizza
La partie validation/envoi

L'idée, c'est qu'avec les boutons radio de la première partie, tu joue sur une propriété CSS des div 2 et 3 : display: hidden/block avec un évènement JavaScript. Il faut pour celà que tes div aient un attribut id. Proposition exemple :

Code : Tout sélectionner

<?xml version="1.0" encoding="iso-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" xml:lang="fr" />
<title>Commande de pizza</title>
</head>
<body>
<h1>Commandez votre pizza</h1>
<form action="#" method="post" id="cmdpizza">
  <fieldset>
    <legend>Pizza maison ou personnalisée ?</legend>
    <input type="radio" name="perso" id="perso_non" value="non" checked="checked" onclick="document.getElementById('choixpizza').style.display='block'; document.getElementById('creationpizza').style.display='none';">Pizza maison;<br />
    <input type="radio" name="perso" id="perso_oui" value="oui" onclick="document.getElementById('choixpizza').style.display='none'; document.getElementById('creationpizza').style.display='block';">Pizza personnalisée;
  </fieldset>
  <div id="choixpizza" style="display: block">
    <label>Votre choix : <select name="sortepizza">
      <option value="marguerita">Marguerita</option>
      <option value="saumonfume">Saumon fumé</option>
      <option value="quatrefromage">Quatre fromages</option>
    </select></label>
  </div>
  <div id="creationpizza" style="display: none">
    <label>Garniture principale : 
      <select name="garniture">
        <option value="jambon">Jambon</option>
        <option value="saumon">Saumon</option>
        <option value="vegetarienne">Légumes</option>
        <option value="fruitsmer">Fruits de mer</option>
      </select>
    </label><br />
    <label>Suppléments : 
      <select name="garniture">
        <option value="oliven">Olives noires</option>
        <option value="olivev">Olives vertes</option>
        <option value="anchois">Anchois</option>
        <option value="moules">Moules</option>
      </select>
    </label>
  </div>
  <fieldset>
    <input type="submit" name="confirmer" value="Confirmer la commande" />
  </fieldset>
</form>
</body>
</html>

À toi d'arranger la mise en page, bon appétit

03 avr. 2006, 12:54

Pour la seconde question, si tu désactive les champs à ne pas remplir, un seul formulaire convient bien et ça réduit le traitement de récupération

Pour la 1ere, ce que tu peut faire, c'est récupérer la liste des champs de ton formulaire et pour chaque champs, tester si le nom contient "pizza_creation" et si c'est le cas l'activer/desactiver

Code : Tout sélectionner

var tab_elements = new Array;
//Récupération de la liste des champs de ton formulaire
tab_elements = document.form_name.all;

//Parcours de la liste des éléments
for (var i=0; i<tab_elements.length; i++) {	
	//Si l'élément courant contient le terme "pizza_creation"
	if (tab_elements[i].getAttribute("name").indexOf("pizza_creation",0)!=-1) {
		document.form_name.elements[i]disable=true;
	}
}

03 avr. 2006, 13:00

C'est vrai que l'utilisation du display est plus simple en définitive mais à mon avis ça sera plus facile à comprendre visuellement avec un formulaire qui affiche tout mais qui vérouille selon le choix...

Sinon zeus répond à ma question : je met ce bloc de code dans une fonction et j'appelle cette fonction dans mon événement onclick.

Le indexOf("pizza_creation",0) correspond à quoi ? La recherche de la chaîne "pizza_creation" à partir du caractère 0 ? Ca renvoie -1 si ça marche pas et autre chose sinon, c'est ça ?

En tout cas merci à vous deux.

03 avr. 2006, 13:13

Je pense que selfhtml te renseignera mieux que moi

03 avr. 2006, 13:28

Yep je suis allé regarder =)

Par contre j'ai un souci avec la création du tableau contenant les éléments.
La ligne

Code : Tout sélectionner

tab_elements = document.form_name.all;

ne fonctionne pas.

Pourtant j'ai bien mis un attribut name="form_name" à ma balise form mais je n'arrive pas à accéder à ce formulaire (et donc encore moins à ses champs). Une idée d'où vient le problème ?
A la rigueur je peux toujours passer par l'ID du formulaire.

Edit : en fait à mon avis c'est parce que mes balises de formulaire (select, input, etc) ne suivent pas directement la balise form mais se trouvent dans un tableau.

03 avr. 2006, 13:48

essaye

Code : Tout sélectionner

document.form_name.elements.all

Je ne suis pas sûr de cette syntaxe. Si un pro du JS pouvait confirmer

03 avr. 2006, 15:02

En farfouillant un peu, je suis arrivé à mes fins.

Voila ma fonction finale :

Code : Tout sélectionner

		function disableElements(header) {
			//Parcours de la liste des éléments
			for (var i=0; i<document.forms[0].elements.length; i++) {   
				//Si l'élément courant contient le terme header
				if (document.forms[0].elements[i].getAttribute("name") != null && document.forms[0].elements[i].getAttribute("name").indexOf(header, 0) != -1) {
					document.forms[0].elements[i].disabled=true;
				}
			}
		}

formulaires, événement onclick

Qui est en ligne