[Plan du site] Vous êtes ici --- > Le Site du Zéro > Les forums > Site Web > XHTML / CSS > [Javascript] apparition d'un input en fonction d'un select > Lecture du sujet

[Javascript] apparition d'un input en fonction d'un select

Vous devez être inscrit pour pouvoir poster des messages

Résolu Le problème de ce sujet a été résolu

Page : 1

Auteur

Message

1 visiteur sur ce sujet (1 anonyme)

Page : 1

Arkezis

# Posté le 03/07/2008 à 17:51:24

No woman no cry ...
Avatar

Groupe : Membres

Bonjour,
Je suis en train de coder un petit site et j'ai besoin pour celui ci de quelque chose d'assez spéciale.
Lorsque qu'une personne veut ajouter un membre, elle doit lui assigner un Poste !
Je compte donc créé un select qui affiche les postes (via Code : SQL

1	SELECT DISTINCT Poste FROM Membres

) où la personne pourra choisir celui qu'elle veut.
Si celui ci n'existe pas, je souhaite rajouter une option dans le select "Autres" qui alors fera apparaitre un input pour rajouter un nouveau Poste.
Comment cela se traduit il au niveau javascript ?
Et au niveau de l'implémentation PHP, lors de la récupération des variables ?
Est il possible que la chaine rentrée dans l'input soit pris en compte comme si c'était une valeur du select ? (me suis je fait comprendre ?)

Merci à vous

Ark'

Arkezis

# Posté le 05/07/2008 à 13:17:28

No woman no cry ...
Avatar

Groupe : Membres

Up !

Asphator

# Posté le 05/07/2008 à 15:03:31

S'instruire pour vaincre...
Avatar

Groupe : Membres

Salut

Je suis pas sur d'avoir compris, mais je vais essayer...

Tu peux le faire soit en javascript, soit en PHP (avec des case, un rechargement de page sur le onChange de ton select si sa value vaut "autres", et une variable qui mémorise le case auquel tu souhaites aller).

Je te fais un exemple (celui avec javascript) :
Code : Autre

<script type="text/javascript>
function ifOther(elem){
  if(elem == 'Autres'){
    document.getElementById('inputPoste').style.display = 'block'; 
    document.getElementById('selectPoste').style.display = 'none';
    document.getElementById('selectPoste').value = '';
  }
  else{
    document.getElementById('inputPoste').style.display = 'none'; 
    document.getElementById('selectPoste').style.display = 'block';
    document.getElementById('inputPoste').value = '';
  }
}
</script>
<select name="choixPosteSelect" onChange="ifOther(this.value)" id="selectPoste" style="display:block;">
<option value="" selected="selected"> </option>
<?php
$sql = mysql_query("SELECT DISTINCT Poste FROM Membres");
while($data = mysql_fetch_array($sql))
  echo '<option value="'.$data['Poste'].'">'.$data['Poste'].'</option>';
?>
</select>
<input type="text" id="inputPoste" name="choixPosteInput" value="" maxLength="32" style="display:none;" />

Voilà, le tout dans un form et normalement...
Fais un Code : Autre

1	<pre><?php print_r($_POST); ?></pre>

sur ta page où tu récupères les données pour vérifier le contenu des données que tu transmets.
L'astuce que j'utilise ici, c'est que je vide le champs qui n'est pas affiché, ainsi, sur ta page de récupération, tu pourras faire le test suivant :
- si choixPosteSelect vide, alors on prend choixPosteInput
- si choixPosteInput vide, alors on prend choixPosteSelect
- si choixPosteSelect et choixPosteInput sont tous les deux vides, c'est qu'aucun choix n'a été effectué, auquel cas je pense qu'il faut rediriger sur le formulaire pour le refaire faire.

Voilà, est-ce que ça t'aide?

Édité le 05/07/2008 à 15:04:11 par Asphator

_________________________________________
"Plus on rate, plus on a de chances de réussir"...
Les seules limites sont les notres...
S'instruire pour vaincre...

Arkezis

# Posté le 05/07/2008 à 16:08:30

No woman no cry ...
Avatar

Groupe : Membres

J'ai du mal à comprendre ton code !
En fait, ce que je veux faire c'est juste un select et lorsque l'utilisateur choisit "Autres" dans celui ci, un input apparaît pour qu'il choisisse la valeur !

Je vois pas comment ton code fais ca ? (en même temps, moi et le javascript

)

Timot

# Posté le 05/07/2008 à 16:23:21

Réfléchir ne tue pas !

Groupe : Membres

Cette réponse a aidé l'auteur du sujet

Beh ton formulaire avec un peu de js :
<select onchange="if(this..selectedIndex.value == 'autre') document.getElementById('autres').style.display = 'block'; else document.getElementById('autres').style.display = 'none';>
<option value="premier">Premier choix</option>
<option value="deuxieme">Deuxieme choix</option>
<option value="autre">Autres</option>
</select>
<input id="autres" type="text" style="display:none;" />

Arkezis

# Posté le 05/07/2008 à 17:30:10

No woman no cry ...
Avatar

Groupe : Membres

J'ai modifié un peu ton code et ca marche Timot

Code : HTML

<form method="post" cible="suite.php">

<select onchange="if(this.selectedIndex == 2) document.getElementById('autres').style.display = 'block'; 
		   else document.getElementById('autres').style.display = 'none';" name="test">
<option value="premier">Premier choix</option>
<option value="deuxieme">Deuxieme choix</option>
<option value="autre">Autre</option>
</select>
<input id="autres" type="text" style="display:none;" /> 

</form>

Maintenant, comment faire pour que, lorsque l'utilisateur utilise "autre" et rentre quelque chose dans le input, la valeur du input soit comme une option du select ?!! (j'espère que j'arrive à me faire comprend :euh:

)

Édité le 05/07/2008 à 17:35:08 par Arkezis

FireHunter

# Posté le 05/07/2008 à 18:12:49

Hack System V.0
Avatar

Groupe : Membres

Tu applique un name dans le input et dans ta page de traitement, tu la stocke dans ta variable POST correspondant au select ... Fin je pense que c'est comme ca

Chan d'aide au Coding xHTML et CSS : #xhtml sur EpikNet ...

Arkezis

# Posté le 06/07/2008 à 16:01:03

No woman no cry ...
Avatar

Groupe : Membres

Bon, pour que cela fonctionne avec autre chose que le numéro de champs (ce qui est compliqué à utiliser lorsque l'onf ait un while, il faut utiliser comme ceci !

Code : HTML

<select onchange="if(this.options[this.selectedIndex].value == 'Autre') document.getElementById('autres').style.display = 'block'; 
		   else document.getElementById('autres').style.display = 'none';" name="test">
		<?
		$sql = "SELECT DISTINCT Poste FROM Equipage";
		$req = $connexion->query($sql);
		while($pos = $req->fetch_object()){
			echo	'<option value="'.$pos->Poste.'">'.$pos->Poste.'</option>';
		}
		echo	'<option value="Autre">Autre</option></select>';
		echo	'<input id="autres" type="text" style="display:none;" /> ';

Édité le 06/07/2008 à 16:01:59 par Arkezis

Retour au forum "XHTML / CSS" ou à la liste des forums

Vous devez être inscrit pour pouvoir poster des messages

Tutoriels

Communauté

Mon compte

Recherche

Livre d'or

Publicité

[Javascript] apparition d'un input en fonction d'un select