Afficher les éléments d'un form un par un

**xoxo27** · 04/04/2014, 11h56

Bonjour,

Je vous explique mon interrogation.
J'ai un formulaire fonctionnel mais je voudrais l'optimiser pour des questions de présentation.

Enfet, je voudrais que :
Dés que l'utilisateur à sélectionné un élément dans le select, cela soit reconnu, j'enregistre ma variable puis je cache le select et en affiche un autre à la place, mais sur la même page.
Je répéterais l'opération en tout 4 fois.

Mes interrogations sont donc:
Puis-je le faire de façon dynamique, sans appuis sur un bouton submit?
Dois je faire autant de formulaires que de "changement de select"?
Quelle est la meilleure méthode à utiliser?

Ça peut paraitre anodin comme ça mais j'avoue me prendre pas mal la tête, j'ai pourtant de bonne bases en php

J'ai fais un formulaire de test pour bien saisir la technique :

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
 
<head>
 
<title>Test de propriété "Visible/invisible"</title>
 
 
 
<script language="JavaScript">
 
 
 
var ns4=document.layers
 
var ie4=document.all
 
var ns6=document.getElementById&&!document.all
 
 
 
function Affiche_Cache(nObjet) {
 
 if(ie4) { // Internet explorer
 
   eval(nObjet).style.visibility = 
 
    (eval(nObjet).style.visibility=='visible'?'hidden':'visible');
 
 }
 
 else if(ns4) { // Netscape 4.x
 
   document.eval(nObjet).visibility = 
 
    (document.eval(nObjet).visibility=='show'?'hidden':'show');
 
	}
 
 else if(ns6) { // Netscape 6 (mozilla)
 
   var divns6 = document.getElementsByTagName("div")
 
   divns6[nObjet].style.visibility = 
 
    (divns6[nObjet].style.visibility=='visible'?'hidden':'visible');
 
 }
 
}
 
</script>
 
</head>
 
<?php $t1=$_POST["select1"];?>
<form name="test">
 
Bonjour 
<select name="select1">
<option disabled='disabled' selected='selected' >Selectionner</option>
<option value = "1">Coucou</option>
<option value = "2">Bonjour</option>
</select>
 
Au revoir
<select name="select2" style="visibility:hidden" >
<option disabled='disabled' selected='selected' >Selectionner</option>
<option value = "1">salut</option>
<option value = "2">a plus</option>
</select>
<input type="submit" name="ok1" value="valider" />
</form>

Pour être plus clair si je ne le suis pas : Dés que l'utilisateur à sélectionné "Coucou" ou "Bonjour", je cache le select et affiche l'autre à la place ainsi de suite jusqu'à l'envoi de mes données dans la BDD.

**NoSmoking** · 05/04/2014, 00h20

Bonjour,
rien que cette ligne devrait t’inciter à trouver, ou à créer, un autre script...

Code :

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

1
2
3
var ns4=document.layers
var ie4=document.all
var ns6=document.getElementById&&!document.all

Dés que l'utilisateur à sélectionné un élément dans le select, cela soit reconnu, j'enregistre ma variable puis je cache le select et en affiche un autre à la place, mais sur la même page.

ergonomiquement parlant je ne trouve pas cela très judicieux, mais peut être n'ai je pas compris la finalité.

Pour essayer de répondre à la question il te faut regarder du coté de l'événement onchange des SELECTs, à voir pour le principe Comment lier deux listes déroulantes entre elles ?

**xoxo27** · 07/04/2014, 12h11

Merci, ta réponse ma guidée, cela fonctionne avec un autre script,

Code :

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

1
2
3
4
5
6
7
8
9
function showhide(divid){
	var nomComDiv=document.getElementById("nomComDiv");
  var com = document.getElementById("selectCom");
 
  if(com != "" ) {
    nomComDiv.style.display = 'none';
	ancDiv.style.display = 'block';
 
  }

Mon seul problème maintenant est que l'élément ne remplace pas l'autre, du coup l'un disparait et l'autre apparait, cependant il laisse un espace vide et c'est pas trés joli

**NoSmoking** · 07/04/2014, 15h55

Code :

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

1
2
3
  var com = document.getElementById("selectCom");
 
  if(com != "" ) {

est ce que tu comprends ce que tu écris là ?

Afficher les éléments d'un form un par un

JavaScript

Discussions similaires

Partager

Partager