Afficher champs au clic d'un bouton

Fermé
MrHip7 Messages postés 31 Date d'inscription jeudi 9 janvier 2014 Statut Membre Dernière intervention 6 mai 2015 - 30 avril 2015 à 09:51
MrHip7 Messages postés 31 Date d'inscription jeudi 9 janvier 2014 Statut Membre Dernière intervention 6 mai 2015 - 30 avril 2015 à 14:29
Bonjour tout le monde! :)

Alors voila je voudrais vous poser une petite question..
J'ai des champs php de formulaire que je voudrais afficher au clic sur un bouton.
J'ai mis ces champs en style="display:none", pour ne pas qu'il soit visible.
J'ai créer le dit bouton, avec un onclick="addchamp()", qui appel donc ma fonction addchamp..
Le soucis est que ma fonction s'execute a un premier clic, mais qu'ensuite, elle ne fonctionne plus:
le champs "reponse 3" s'affiche avec sa zone de text, mais pas les autres (au clics suivant)

pouvez vous me dire ce qu'il ne va pas dans ma fonction?

	<label for="rep3" class="float" style="display: none" id="lrep3">Reponse 3:</label><TEXTAREA style="display: none" name="trep3" id="trep3" rows=2 COLS=30></TEXTAREA></br>
	<label for="rep4" class="float" style="display: none" id="lrep4">Reponse 4:</label><TEXTAREA style="display: none" name="trep4" id="trep4" rows=2 COLS=30></TEXTAREA></br>
	<label for="rep5" class="float" style="display: none" id="lrep5">Reponse 5:</label><TEXTAREA style="display: none" name="trep5" id="trep5" rows=2 COLS=30></TEXTAREA></br>
	<label for="rep6" class="float" style="display: none" id="lrep6">Reponse 6:</label><TEXTAREA style="display: none" name="trep6" id="trep6" rows=2 COLS=30></TEXTAREA></br>
	<label for="rep7" class="float" style="display: none" id="lrep7">Reponse 7:</label><TEXTAREA style="display: none" name="trep7" id="trep7" rows=2 COLS=30></TEXTAREA></br>
	<label for="rep8" class="float" style="display: none" id="lrep8">Reponse 8:</label><TEXTAREA style="display: none" name="trep8" id="trep8" rows=2 COLS=30></TEXTAREA></br>
	<input type="button" id="addbut" name="addbut" onclick="addchamp()" value="+">


			function addchamp(){
				if(document.getElementById("lrep3").style = "display: none"){
					document.getElementById("lrep3").style = "";
					document.getElementById("trep3").style = "";
				}
				else {
					if(document.getElementById("lrep3").style = ""){
					document.getElementById("lrep4").style = "";
					document.getElementById("trep4").style = "";
					}
					else {
						if(document.getElementById("lrep4").style = ""){
							document.getElementById("lrep5").style = "";
							document.getElementById("trep5").style = "";
						}
						else {
							if(document.getElementById("lrep5").style = ""){
								document.getElementById("lrep6").style = "";
								document.getElementById("trep6").style = "";
							}
							else {
								if(document.getElementById("lrep6").style = ""){
									document.getElementById("lrep7").style = "";
									document.getElementById("trep7").style = "";
								}
								else {
									if(document.getElementById("lrep7").style = ""){
										document.getElementById("lrep8").style = "";
										document.getElementById("trep8").style = "";
									}
								}
							}
						}
					}
				}
			}


Je vous remercie d'avance

greg





2 réponses

jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
30 avril 2015 à 10:33
Bonjour,
Cette question concerne du javascript .. pas du PHP.
Je déplace la discussion dans la section appropriée du forum.

0
Xavierdu34 Messages postés 216 Date d'inscription lundi 2 décembre 2013 Statut Membre Dernière intervention 10 octobre 2016 21
Modifié par Xavierdu34 le 30/04/2015 à 10:46
Bonjour,

Ton problème se situe à trois niveaux, lorsque tu fais une condition, un if dans ton cas, tu dois tester la condition, pour ce faire en cas de test d'égalité, il faut utiliser deux =, donc dans ton cas :
if(document.getElementById("lrep3").style == "display:none")

Ensuite il y a un autre problème qui se situe sur ton utilisation de style, tu ne peux pas mettre monelement.style = machin, ça ne fonctionne pas, tu dois définir quelle propriété du style est a tester ...
donc dans ton cas :
if(document.getElementById("lrep3").style.display == "none"){

de plus il y a quelques erreurs de logique sur tes conditions, voici un corrigé fonctionnel de ce que tu désires :

<script> 
 function addchamp() {

  var lrep3 = document.getElementById("lrep3").style.display;
  var lrep4 = document.getElementById("lrep4").style.display;
  var lrep5 = document.getElementById("lrep5").style.display;
  var lrep6 = document.getElementById("lrep6").style.display;
  var lrep7 = document.getElementById("lrep7").style.display;
  var lrep8 = document.getElementById("lrep8").style.display;
  
  if( lrep3 == "none"){
   document.getElementById("lrep3").style.display = "";
   document.getElementById("trep3").style.display = "";
  }
  else if( lrep3 == "" && lrep4 != ""){
   document.getElementById("lrep4").style.display = "";
   document.getElementById("trep4").style.display = "";
  }
  else if(lrep4 == "" && lrep5 != ""){
   document.getElementById("lrep5").style.display = "";
   document.getElementById("trep5").style.display = "";
  }
  else if(lrep5 == "" && lrep6 != ""){
   document.getElementById("lrep6").style.display = "";
   document.getElementById("trep6").style.display = "";
  }
  else if(lrep6 == "" && lrep7 != ""){
   document.getElementById("lrep7").style.display = "";
   document.getElementById("trep7").style.display = "";
  }
  else if(lrep7 == "" && lrep8 != ""){
   document.getElementById("lrep8").style.display = "";
   document.getElementById("trep8").style.display = "";
  }
 }
</script>


J'espère que ça t'aideras à comprendre, n'hésites pas si tu as un souci de compréhension à demander des précisions.

Cordialement.
0
MrHip7 Messages postés 31 Date d'inscription jeudi 9 janvier 2014 Statut Membre Dernière intervention 6 mai 2015
30 avril 2015 à 14:29
Salut, merci d'avoir rep'!

Au final, j'ai réussi a me debrouiller (plutot pas mal en plus):

			var id=3;
			function addchamp(){
				var ids = id.toString();
				var ref='lrep'+ids;
				var ref2='trep'+ids;
				
				if(document.getElementById(ref).style = "display: none"){
					document.getElementById(ref).style = "";
					document.getElementById(ref2).style = "";
					document.getElementById(ref2).required =true;         
				}
				id++;
				if(id>8){
					document.getElementById("addbut").style = "display: none";
				}
				
			}
0