Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

+ Répondre à la discussion
jQuery Discussion :

Ignorer certains éléments d'un formulaire


Sujet :

jQuery

  1. #1
    Membre régulier
    Inscrit en
    Avril 2009
    Messages
    177
    Détails du profil
    Informations forums :
    Inscription : Avril 2009
    Messages : 177
    Points : 78
    Points
    78
    Par défaut Ignorer certains éléments d'un formulaire
    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.

  2. #2
    Membre éclairé Avatar de tigunn
    Homme Profil pro
    Développeur de bug
    Inscrit en
    Janvier 2003
    Messages
    608
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 43
    Localisation : France

    Informations professionnelles :
    Activité : Développeur de bug

    Informations forums :
    Inscription : Janvier 2003
    Messages : 608
    Points : 658
    Points
    658
    Par défaut
    Salut,
    ce n'est qu'une idée jetée de bon matin: mais ne pourrais tu pas faire deux formulaires?!

  3. #3
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Points : 91 220
    Points
    91 220
    Billets dans le blog
    20
    Par défaut
    Dans ta fonction de vérification des champs de formulaire, fais la vérification uniquement si le champ est actif.

  4. #4
    Membre régulier
    Inscrit en
    Avril 2009
    Messages
    177
    Détails du profil
    Informations forums :
    Inscription : Avril 2009
    Messages : 177
    Points : 78
    Points
    78
    Par défaut
    Merci de vos suggestions.

    Citation Envoyé par tigunn Voir le message
    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?

    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

  5. #5
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Points : 91 220
    Points
    91 220
    Billets dans le blog
    20
    Par défaut
    Tu pourrais probablement te contenter d'alterner la classe required quand tu désactive un champ (.addClass('required'), removeClass('required') ou toggleClass('required')).

  6. #6
    Membre régulier
    Inscrit en
    Avril 2009
    Messages
    177
    Détails du profil
    Informations forums :
    Inscription : Avril 2009
    Messages : 177
    Points : 78
    Points
    78
    Par défaut
    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?

  7. #7
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Points : 91 220
    Points
    91 220
    Billets dans le blog
    20
    Par défaut
    Il faut regarder la syntaxe de base de jQuery...
    ID Selector (“#id”)

  8. #8
    Membre régulier
    Inscrit en
    Avril 2009
    Messages
    177
    Détails du profil
    Informations forums :
    Inscription : Avril 2009
    Messages : 177
    Points : 78
    Points
    78
    Par défaut
    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?

  9. #9
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Points : 91 220
    Points
    91 220
    Billets dans le blog
    20
    Par défaut
    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") {
     
    	}
    }
    ?>

  10. #10
    Membre régulier
    Inscrit en
    Avril 2009
    Messages
    177
    Détails du profil
    Informations forums :
    Inscription : Avril 2009
    Messages : 177
    Points : 78
    Points
    78
    Par défaut
    Merci de ton aide.
    Bonne soirée.

  11. #11
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 082
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 082
    Points : 44 698
    Points
    44 698
    Par défaut
    Citation Envoyé par Bovino Voir le message
    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.

  12. #12
    Membre régulier
    Inscrit en
    Avril 2009
    Messages
    177
    Détails du profil
    Informations forums :
    Inscription : Avril 2009
    Messages : 177
    Points : 78
    Points
    78
    Par défaut
    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.

+ Répondre à la discussion
Cette discussion est résolue.
ActualitésF.A.Q JSTUTORIELS JSSOURCES JSEXERCICES JSLIVRES JSQUIZZ JS

Discussions similaires

  1. Ignorer certains éléments d'un formulaire
    Par gege765 dans le forum Général JavaScript
    Réponses: 11
    Dernier message: 20/01/2012, 00h18
  2. Cacher certains éléments d'un site lors de l'impression
    Par beegees dans le forum Balisage (X)HTML et validation W3C
    Réponses: 4
    Dernier message: 04/04/2006, 16h56
  3. [Débogage Activé] Ignorer certaines lignes
    Par portu dans le forum EDI
    Réponses: 6
    Dernier message: 23/02/2006, 16h36
  4. [JTree] Cacher certains éléments ...
    Par JamesP dans le forum Composants
    Réponses: 5
    Dernier message: 15/02/2006, 19h16
  5. Nom des éléments d'un formulaire
    Par licorne dans le forum Général JavaScript
    Réponses: 10
    Dernier message: 15/12/2005, 09h45

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo