Problème avec Javascript (formulaire et liste

Fermé
Jackson27 - 21 avril 2004 à 10:42
flokocha Messages postés 1510 Date d'inscription lundi 8 mars 2004 Statut Membre Dernière intervention 10 octobre 2015 - 22 avril 2004 à 17:55
Bonjour à tous,

Mon problème concerne les listes déroulantes:
J'ai deux champs dans mon formulaire

<select name="champ1">
<option value="option1">Option1
<option value="option2">Option2
</select>

<select name="champ2">
<option value="optionA">OptionA
<option value="optionB">OptionB
</select>

Ce que je voudrais c'est que lorsque l'utilisateur choisit l'option2 du champ1,
un nouveau choix apparaisse dans le champ2 (ex:optionC)

Merci d'avance pour votre aide
A voir également:

23 réponses

flokocha Messages postés 1510 Date d'inscription lundi 8 mars 2004 Statut Membre Dernière intervention 10 octobre 2015 281
21 avril 2004 à 10:46
0
Deja desole mais j'ai des difficultes à me connecter sur le site.

Donc pour en revenir à mon probleme:
J'ai ma fonction;

<script language="javascript">

function change_menu_2()
{
if(document.forme[0].champ2.option.value = 'valeur2');
{
//tu indiques les valeur de la liste 2 et tu actualises la page
}

}
</script>

Ce que je ne comprends pas c'est comment je dois indiquer les valeurs de ma deuxième liste et actualiser la page. Plus precisement je ne vois pas trop la syntaxe à utiliser. J'ai essayé en ajoutant "bêtement" le code html de ma deuxième liste mais ca n'a rien donné.

J'espère que tu vas pouvoir m'aider
0
Merci je crois avoir à peu près compris. Je vais m'y mettre dès maintenant.;-)

Par contre j'aurai encore besoin d'aide, mais cette fois c'est un peu plus compliqué. Il s'agit toujours de javascript et de formulaire.


Ce que je cherche c'est un formulaire à au moins trois champs:
- le premier, qui ne soit pas modifiable par le visiteur, dans lequel apparait un nombre défini dans un formulaire précédent à partir d'une sélection.
Je m'explique:
<form name=formulaire1" action="formulaire2.php">
Etes vous intelligent?
<select name="question">
<option value="1">Oui
<option value="2">Non
</select></form>

Imaginons que l'utilisateur sélectionne Non (il l'as fait expres:-)).
Il valide et là il est emmené vers le formulaire2 avec les trois champs en question.
Dans le premier champ si le visiteur a choisi Oui je voudrais qu'il y ait le nombre 20, s'il a choisi Non, le nombre 10.

Ensuite dans les champs suivants (champ2 et 3) j'aimerais qu'ils soient remplis, par défaut, par le chiffre 0. Ensuite il faudrait que dans chacun des champs soit present "deux boutons" (par exemple un + et un - ou alors des fleches). Ainsi lorsque l'on clique sur + d'un des deux champs, celui-ci se crédite d'une unité et que parallèlement le champ1 (avec les 20 ou10) perdent une unité.
Et ainsi de suite jusqu'a ce que la totalité des points du premier ait été répartis dans les deux autres.


J'espère que vous comprendrez et que vous pourrez me filer un coup de main.
Merci d'avance pour votre aide.
0
flokocha Messages postés 1510 Date d'inscription lundi 8 mars 2004 Statut Membre Dernière intervention 10 octobre 2015 281
21 avril 2004 à 11:31
Ben il te suffit de faire un script de traitement en php du type
$_POST["question"];
if ($question==1)
{ $value=20; }
if ($question==2)
 { $value=10; }

Ensuite dans ton formulaire pour ton champ 1 tu écris:
<input type=text value= <?=$value?> >


En ce qui concerne l'incrémentation, tu fais une fonction JavaScript appelée lors de l'évênement onClick sur chaque bouton, par exemple pour le bouton plus:
function plus()
{
  document.nomduform.champ1.value--;
  document.nomduform.champ2.value++;
}
0
Merci beaucoup ça va vraiment m'aidé pour la suite.
Encore une dernière petite chose et je crois que ce sera bon:

Il faudrait enfin que lorsque tous les points ont été dépensés ( c'est-à-dire lorsque le champ 1 arrive à zéro) et si le visiteur clique une nouvelle fois sur l'un des boutons plus, il y est un message d'alerte du style: "Tous vos points ont été dépensés"

Merci encore pour ton aide
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
flokocha Messages postés 1510 Date d'inscription lundi 8 mars 2004 Statut Membre Dernière intervention 10 octobre 2015 281
21 avril 2004 à 11:46
Et bien dans ta fonction tu rajoutes au tout début un test pour savoir s'il reste encore des points:

function plus()
{
if (document.nomduform.champ1.value==0)
{
  alert("Tous vos points ont été dépensés");
}
else
{
  document.nomduform.champ1.value--;
  document.nomduform.champ2.value++;
}
}
0
Merci pour ça!

Par contre je n'ai pas résolu mon premier problème.
J'ai quelques difficultés à comprendre avec le lien que tu m'as donné.
Est- ce que tu pourrais m'expliquer un peu plus en details le fonction à utiliser dans head et son application dans body.

Merci d'avance
0
flokocha Messages postés 1510 Date d'inscription lundi 8 mars 2004 Statut Membre Dernière intervention 10 octobre 2015 281
21 avril 2004 à 14:27
Tu places dans les balises head la fonction qui va changer ta liste déroulante.
Ensuite dans la liste déroulante qui déterminera le changement de l'autre liste, tu places dans la balise select l'option onChange="nomdetafonction();" .

Je ne sais pas ce que tu veux faire exactement donc je ne peux pas t'aider plus pour la réalisation de ta fonction.
0
Fist of Fury
21 avril 2004 à 20:01
Deja desole mais j'ai des difficultes à me connecter sur le site.

Donc pour en revenir à mon probleme:
J'ai ma fonction;

<script language="javascript">

function change_menu_2()
{
if(document.forme[0].champ2.option.value = 'valeur2');
{
//tu indiques les valeur de la liste 2 et tu actualises la page
}

}
</script>

Ce que je ne comprends pas c'est comment je dois indiquer les valeurs de ma deuxième liste et actualiser la page. Plus precisement je ne vois pas trop la syntaxe à utiliser. J'ai essayé en ajoutant "bêtement" le code html de ma deuxième liste mais ca n'a rien donné.
Ah oui et aussi qu'est-ce que ca veut dire le "[0]" placé après "forme".


Encore une chose à laquelle je viens de penser:
Imaginons que ds mon formulaire il y est 1 champ avec 2 options possibles.
par ex:
<select name="sexe">
<option value>Homme
<option value>Femme
</select>

Si le visiteur choisit "Homme" et valide le formulaire, j'aimerais que, par ex, le nombre 10 soit stocké dans une base de données mysql, c'est-à-dire dans une table et dans un enregistrement que j'aurai auparavant crées.
Comment puis-je faire à ton avis?

A nouveau merci d'avance.
0
flokocha Messages postés 1510 Date d'inscription lundi 8 mars 2004 Statut Membre Dernière intervention 10 octobre 2015 281
22 avril 2004 à 09:25
Pour ce qui est de form[0], tu oublies, c'était juste un exemple du post je t'ai filé. Il faut que tu remplaces ça par le nom que tu as donné à ton form.

Pour ce qui est de ta fonction, ça devrait donner quelque chose comme ça si je ne me trompe pas :
function change_menu_2() 
{ 
  if(document.nomdetonform.champ2.option.value == 'valeur2')
  { 
    document.nomdetonform.nomdetonchamp.innerHTML = "<option>Nouvelle valeur</option>";
  } 
} 


Pour ce qui est de ton dernier point, je ne comprends pas du tout ce que tu veux faire. Veux-tu qu'à chaque fois que l'on choisit "homme", on incrémente un champ d'un enregistrement de 10?
0
Je vais de m'expliquer un peu mieux.

Admettons que je crée 2 tables:
create table table1 (description VARCHAR(32))
create table table2 (points VARCHAR(32))

J'ai pris volontairement 2 tables distinctes et non une table avec les 2 champs réunis.

Donc revenons à mon formulaire:
Le visiteur choisit "homme", valide, cette valeur s'insère en tant que nouvel enregistrement du champ "description" (ça je sais faire). Et en même temps je souhaiterais que dans le champ "points" (jeu de mots!:-)) s'insère un nouvel enregistrement qui serait 10.

J'espère que j'ai été un peu plus clair.
0
flokocha Messages postés 1510 Date d'inscription lundi 8 mars 2004 Statut Membre Dernière intervention 10 octobre 2015 281
22 avril 2004 à 11:10
PTDR pour le champ "points" !!!

Mais ça n'a pas de sens! Tu vas n'avoir qu'une serie de 10 dans ce fameux champ!

De plus si tu sais déjà comment faire pour insérer un nouvel enregistrement dans "description", je ne comprends pas pourquoi tu bloques pour effectuer la même opération dans "points"! C'est exactement le même principe...
0
C'est juste un exemple le champ "points" et l'enregistrement 10; dans ma table j'aurais bien plus de champs et d'enregistrements.


En fait d'habitude ce que je fais c'est que j'insère l'enregistrement en fonction du résultat du formulaire:

$description = $_POST["description"]

mysql_connect();
mysql_select_db();

$requete = "INSERT INTO table1 (description)
VALUES ('$description')";

...etc


Mon problème c'est que je ne sais pas vraiment comment faire lorsque la variable est choisit par moi et non plus par celui qui rempli le formulaire.
C'est surtout que je ne sais pas comment l'écrire. C'est un de mes principals problèmes en programmation js et php, je ne connais pas bien la syntaxe.
0
flokocha Messages postés 1510 Date d'inscription lundi 8 mars 2004 Statut Membre Dernière intervention 10 octobre 2015 281
22 avril 2004 à 11:42
Et bien c'est tout simplement INSERT INTO table2 (points) VALUES ('10')
0
Ah ouai ok! C'est tout bête en fait
Merci bien!
0
flokocha Messages postés 1510 Date d'inscription lundi 8 mars 2004 Statut Membre Dernière intervention 10 octobre 2015 281
22 avril 2004 à 13:42
C'est bien pour ça que je comprenais pas pourquoi tu bloquais la dessus.
0
Arghhhh!
Decidement rien ne va plus.
Je suis en train de me casser la tête sur mon formulaire.
Voila le contenu d'une partie de ma page, formulaire compris

<html><head>
<script language="Javascript">
function change_menu_2()
{
if(document.forme.sexe.option.value == 'f');
{
document.forme.classe.innerHTML = "<option value="geisha">Geisha</option>";
}

}
</script>
</head>
<body>

<form name="forme">

<select name="sexe" onChange="change_menu_2();">
<option value="m">Masculin</option>
<option value="f">Féminin</option>
</select>

<select name="classe">
<option value="guerrier">Guerrier</option>
<option value="sorcier">Sorcier</option>
</select>

</body>
</html>


Donc en définitive ce que je voudrais c'est que lorsque "Féminin" est choisie, l'option "Geisha" s'ajoute dans le deuxième champ.
Help pleaseeeee!

Decidemment j'ai vraiment trop de mal ;-)
0
Et à l'inverse: si on re-choisit l'option "masculin", l'option "geisha" disparaisse
0
flokocha Messages postés 1510 Date d'inscription lundi 8 mars 2004 Statut Membre Dernière intervention 10 octobre 2015 281
22 avril 2004 à 14:18
Cette ligne est incorrecte: document.forme.classe.innerHTML = "<option value="geisha">Geisha</option>";

Si tu rouvres des guillemets à l'intérieur d'une chaîne, c'est interprété comme si tu fermais les premières guillemets.
Il faut donc utiliser des quotes et des guillemets pour que cela fonctionne:
document.forme.classe.innerHTML = "<option value='geisha'>Geisha</option>";
0
marche toujours pas :-(
0
flokocha Messages postés 1510 Date d'inscription lundi 8 mars 2004 Statut Membre Dernière intervention 10 octobre 2015 281
22 avril 2004 à 14:24
T'as quoi comme message d'erreur?
0
Ok ca marche!
Il y a juste un dernier petit détail à régler:
Lorsque je clique sur feminin aucun probleme, geisha s'affiche.
Lorsque je re-clique sur masculin, geisha s'affiche encore.
Si à nouveau je clique sur feminin, geisha s'affiche.
Ce qui fait qu'à la fin je me retrouve avec 3 options geisha.
0
flokocha Messages postés 1510 Date d'inscription lundi 8 mars 2004 Statut Membre Dernière intervention 10 octobre 2015 281 > Jackson27
22 avril 2004 à 14:52
C'est normal maintenant il faut l'enlever quand tu cliques sur masculin!
Rajoute ça à la fin de ta fonction:
if (document.forme.sexe.value == 'm')
{
document.forme.classe.options[2] = null;
}
0
L'option ne se rajoute pas quand je cliques sur masculin, mais elle ne s'enlève pas non plus
0
flokocha Messages postés 1510 Date d'inscription lundi 8 mars 2004 Statut Membre Dernière intervention 10 octobre 2015 281 > Jackson27
22 avril 2004 à 15:01
Ca fonctionne très bien chez moi je te redonne le code entier:
<html><head> 
<script language="Javascript"> 
function change_menu_2() 
{ 
if (document.forme.sexe.value == 'f') 
{
var geisha = new Option("Geisha","geisha");
var select = document.forme.classe;
select.options[select.options.length] = geisha; 
}
if (document.forme.sexe.value == 'm')
{
document.forme.classe.options[2] = null;
}
} 
</script> 
</head> 
<body> 

<form name="forme"> 

<select name="sexe" onChange="change_menu_2();"> 
<option value="m">Masculin</option> 
<option value="f">Féminin</option> 
</select> 

<select name="classe"> 
<option value="guerrier">Guerrier</option> 
<option value="sorcier">Sorcier</option> 
</select> 

</body> 
</html> 

Méfie-toi j'ai remarqué que tu avais tendance à rajouter des ";" après tes conditions dans les if, or il n'y en a pas!
0
Jackson27 > flokocha Messages postés 1510 Date d'inscription lundi 8 mars 2004 Statut Membre Dernière intervention 10 octobre 2015
22 avril 2004 à 15:08
Remarque très pertinente! :-)
C'était à cause de ça que ça marchait pas (mais promis je recommencerais plus!!)

En tout cas merci beaucoup pour toute l'aide que tu m'as apporté.
A priori je devrais bien m'en tirer avec tout ce que tu m'as filé, mais c'est possible que j'ai encore besoin de quelques coups de main! ;-)
0