Ignorer certains éléments d'un formulaire [Résolu]

gege765 · 18/01/2012, 18h29

Bonsoir,

Je souhaite qu'une partie d'un formulaire de recherche s'affiche en fonction du choix d'un bouton radio.

Pour faire cela j'ai décidé d'afficher ou nom le formulaire concerné grâce à cette fonction :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
function grise(radio) {
	if(radio[0].checked){
		document.getElementById('f2').style.display = "none";
		document.getElementById('f1').style.display = "block";
	} 
	if(radio[1].checked){
		document.getElementById('f1').style.display = "none";
		document.getElementById('f2').style.display = "block";
	}
}

Le problème c'est que sur le formulaire non affiché les contrôles javascript (class required) et php sont comme même effectué.

Voici mon code html :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<body onload="grise(document.getElementsByName('choixRech'))">
		<form action="traitementApp.php" class="cmxform" id="frm_choix" method="post">
			<p>
				<label for="recherche">Type de recherche : </label>
				<input type='radio' name='choixRech' value='baie' checked='checked' onclick='grise(this.form.choixRech)'> Recherche par Baie 
				<input type='radio' name='choixRech' value='ip' onclick='grise(this.form.choixRech)'> Recherche par Nom ou IP
			</p>
			<fieldset id ='f1'>
				<legend>Recherche par local </legend>
				<p>
					<label for="site">Site</label>
					<select name='site' id='site' class="required">
						<option value="">Choisir un site...</option>
						<option value="lile">lile</option>
						<option value="amiens">amiens</option>
						<option value="lile">rouen</option>
						<option value="paris">paris</option>
					</select>
				</p>
				<p>
					<label for="batiment">Bâtiment</label>
					<span id='spbatiment'>
						<select name='batiment' id='batiment' class="required">
							<option value="">Choisir un batiment...</option>
							<option value="c">c</option>
							<option value="d">d</option>
							<option value="f">f</option>
						</select>
					</span>
				</p>
				<p>
					<label for="baie">Local</label>
					<span id='spbaie'>
						<select name='baie' id='baie' class="required">
							<option value="">Choisir un local...</option>
							<option value="b1">b1</option>
							<option value="b2">b2</option>
							<option value="b3">b3</option>
							<option value="b5">b5</option>
							<option value="b7">b7</option>
							<option value="b8">b8</option>
							<option value="b9">b9</option>
							<option value="b10">b10</option>
						</select>
					</span>
				</p>
			</fieldset>
 
			<fieldset id = 'f2'>
				<legend>Recherche par nom ou IP </legend>
				<p>
					<label for='nom'>Nom</label>
					<select name='nom[]' id='nom' size='4' multiple class="required">
						<option value='2510'>2510</option>
						<option value='2610'>2610</option>
						<option value='2510'>2512</option>
						<option value='2510'>2524</option>
						<option value='2510'>2312</option>
						<option value='2510'>2324</option>
					</select>
				</p>
				<p>
					<label for='ip'>Adresse</label>
					<select name='ip[]' id='ip'size='4' multiple class="required">
						<option value='10.0.0.0'>10.0.0.0</option>
						<option value='10.0.0.2'>10.0.0.2</option>
						<option value='10.0.0.3'>10.0.0.3</option>
						<option value='10.0.0.5'>10.0.0.5</option>
						<option value='10.0.0.9'>10.0.0.9</option>
						<option value='10.0.0.10'>10.0.0.10</option>
						<option value='10.0.0.11'>10.0.0.11</option>
						<option value='10.0.0.12'>10.0.0.12</option>
						<option value='10.0.0.13'>10.0.0.13</option>
					</select>
				</p>
			</fieldset>
			<fieldset>
				<legend>Options</legend>
				<p>
					<label for="nbjour">Afficher les données depuis :</label>
					<select name="nbjour">
						<option value="0">Aucun tri</option>
						<option value="1">1 jours</option>
						<option value="7">7 jours</option>
						<option value="30">30 jours</option>
					</select>
				</p>
				<p>
					<input class="submit" type="submit" value="Envoyer">
				</p>
			</fieldset>
		</form>
	</body>

Ya t'il un moyen pour ne pas effectué / ignorer les contrôles sur le formulaire non affiché.
Si cela n'est pas possible comment puis-je m'en sortir ?

Si cela n'est pas possible, quel sont les possibilités pour avoir un formulaire de recherche modulable ?

D'avance merci.

tigunn · 19/01/2012, 09h42

Salut,
ce n'est qu'une idée jetée de bon matin: mais ne pourrais tu pas faire deux formulaires?!

Bovino · 19/01/2012, 10h02

Dans ta fonction de vérification des champs de formulaire, fais la vérification uniquement si le champ est actif.

gege765 · 19/01/2012, 17h57

Merci de vos suggestions.

Citation:

Envoyé par tigunn

Salut,
ce n'est qu'une idée jetée de bon matin: mais ne pourrais tu pas faire deux formulaires?!

Oui je peux faire deux formulaires.
Mais est ce possible de charger l'un ou l'autre en fonction du choix sur le bouton radio?

Citation:

Dans ta fonction de vérification des champs de formulaire, fais la vérification uniquement si le champ est actif.

Le problème c'est que mon javascrip de vérification n'est pas maison mais j'utilise la bibliothèque jquery jquery-plugin-validation
http://bassistance.de/jquery-plugins...in-validation/

Dans ce cas je ne sais pas comment faire la vérification uniquement quand le champs est actif

Bovino · 19/01/2012, 18h02

Tu pourrais probablement te contenter d'alterner la classe required quand tu désactive un champ (.addClass('required'), removeClass('required') ou toggleClass('required')).

gege765 · 19/01/2012, 18h37

Merci de ton aide.
Je ne connaissais pas ces fonctions.

J'ai testé cela :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function grise(radio) {
	if(radio[0].checked){
		document.getElementById('f2').style.display = "none";
		document.getElementById('f1').style.display = "block";
		$("nom").removeClass("required")
		$("ip").removeClass("required")
	} 
	if(radio[1].checked){
		document.getElementById('f1').style.display = "none";
		document.getElementById('f2').style.display = "block";
		$("site").removeClass("required")
		$("batiment").removeClass("required")
		$("baie").removeClass("required")
	}
}

Malheureusement cela ne fonctionne pas.
As-tu une idée du pourquoi?

Bovino · 19/01/2012, 19h06

Il faut regarder la syntaxe de base de jQuery...

ID Selector (“#id”)

gege765 · 19/01/2012, 19h42

Merci et désolé.

Pourtant j'ai consulté l'api avant de reposter
http://jquery.developpeur-web2.com/d...emoveclass.php

Mais l'exemple était avec une balise est donc je suis tombé dans le piège.

J'ai un petit doute pour mes contrôles en php.
Je dois traiter les données avec l'aide du bouton radio en faisant cela :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<?php
	$choix = $_POST['choixRech'];
	if($choix=="baie") {
 
	}
	if($choix=="ip") {
 
	}
?>

C'est bien cela?

Bovino · 19/01/2012, 20h32

Attention, si le champ est disabled, il ne sera pas transmit avec le formulaire, il faut donc vérifier s'il existe :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<?php
if(isset($_POST['choixRech']){
	$choix = $_POST['choixRech'];
	if($choix=="baie") {
 
	}
	if($choix=="ip") {
 
	}
}
?>

gege765 · 19/01/2012, 20h40

Merci de ton aide.
Bonne soirée.

NoSmoking · 19/01/2012, 23h27

Citation:

Envoyé par Bovino

Attention, si le champ est disabled, il ne sera pas transmit avec le formulaire...

cela eut pu être une piste en mettant les éléments appartenant au FIELDSET masqué en disabled et inversement...

Il n'empêche que le test coté serveur doit être fait.

gege765 · 20/01/2012, 00h18

Ok je vais étudier cette piste. Cela me permettra d'apprendre encore de nouvelle chose.

Pour les vérifications en php j'y pense. D'où m'a dernière question.

Bonne nuit.

19/01/2012, 09h42	#2
tigunn Membre expérimenté Développeur de bug Inscription : janvier 2003 Messages : 520 Détails du profil Informations personnelles : Sexe : Âge : 31 Localisation : France Informations professionnelles : Activité : Développeur de bug Informations forums : Inscription : janvier 2003 Messages : 520 Points : 536 Points : 536	Salut, ce n'est qu'une idée jetée de bon matin: mais ne pourrais tu pas faire deux formulaires?! __________________ "le rhume distillation - L’estomac est la cucurbite, le cerveau le chapiteau, & le nez le réfrigérant par lequel s’écoule goutte à goutte le produit de la distillation." de Avicenne Le monde se divise en deux: ceux qui utilisent le tag et les autres. Un problème? venez en découdre!
	00

19/01/2012, 10h02	#3
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 13 808 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 41 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 13 808 Points : 35 787 Points : 35 787	Dans ta fonction de vérification des champs de formulaire, fais la vérification uniquement si le champ est actif. __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	00

19/01/2012, 18h02	#5
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 13 808 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 41 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 13 808 Points : 35 787 Points : 35 787	Tu pourrais probablement te contenter d'alterner la classe required quand tu désactive un champ (.addClass('required'), removeClass('required') ou toggleClass('required')). __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	10

19/01/2012, 19h06	#7
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 13 808 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 41 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 13 808 Points : 35 787 Points : 35 787	Il faut regarder la syntaxe de base de jQuery... ID Selector (“#id”) __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	10

19/01/2012, 20h40	#10
gege765 Membre à l'essai Inscription : avril 2009 Messages : 125 Détails du profil Informations forums : Inscription : avril 2009 Messages : 125 Points : 24 Points : 24	Merci de ton aide. Bonne soirée.
	00

20/01/2012, 00h18	#12
gege765 Membre à l'essai Inscription : avril 2009 Messages : 125 Détails du profil Informations forums : Inscription : avril 2009 Messages : 125 Points : 24 Points : 24	Ok je vais étudier cette piste. Cela me permettra d'apprendre encore de nouvelle chose. Pour les vérifications en php j'y pense. D'où m'a dernière question. Bonne nuit.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email