begin process at 2012 05 29 08:35:42
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

CSS

 > 

Général

 > 

Formulaire, onchange et javascript

Derniers messages déposésPoser une question dans le forum ou lancer une discussion

Formulaire, onchange et javascript

vendredi 27 mai 2011 à 18:35:45 | Formulaire, onchange et javascript

ghetto95
Bonjour,
J'essai depuis plusieurs jours de trouver un moyen de faire un formulaire "intelligent", c'est à dire qu'il afficherai certains champs en fonction de ce que l'utilisateur aura choisit... En gros, dans un select, l'utilisateur choisit une valeur, et en fonction de cette valeur, on affiche certains champs et on en cache d'autres... Mais je ne sais pas quoi mettre dans le onchange.... Pour la delimitation, je pense que je dois utiliser div non??? Un code étant plus parlant, je vous montre ce que j'ai commencé a faire :

<td>Fruits et Légumes</td>
<td> : </td>
<td>
<div>
<select name="fretleg" onchange="????????">
</div>
<option value="fruits">FRUITS</option>
<option value="legumes">LEGUMES</option>
</select>
</tr>
<p>
<div id="fruits" style="display:block">
<tr>
<td>Pomme</td>
<td> : </td>
<td> <input type="text" name="pomme" value="" size="23" maxlength="10"></td>
</tr>
<p>
<tr>
<td>Poire </td>
<td> : </td>
<td> <input type="text" name="poire" value="" size="23" maxlength="10"></td>
</tr>
<p>
<tr>
<td>Ananas</td>
<td> : </td>
<td> <input type="text" name="ananas" value="" size="23" maxlength="10"></td>
</tr>
<p>
<tr>
<td>Orange</td>
<td> : </td>
<td> <input type="text" name="orange" value="" size="23" maxlength="10"></td>
</tr>
</div>

<div id="legumes" style="display:none">
<tr>
<td>Haricots </td>
<td> : </td>
<td> <input type="text" name="haricots" value="" size="23" maxlength="10"></td>
</tr>
<p>
<tr>
<td>Tomates</td>
<td> : </td>
<td> <input type="text" name="tomates" value="" size="23" maxlength="10"></td>
</tr>
<p>
</div>
</table>

<input type="submit" value="send" name="Send">
</form>
</html>


Je suppose que cela ne doit pas être compliqué, mais je ne sais pas faire. Merci de votre aide.
vendredi 27 mai 2011 à 21:27:14 | Re : Formulaire, onchange et javascript

007Julien

Quel curieux tableau sans balise de début, avec des paragraphes ou des div entre les lignes ???
samedi 28 mai 2011 à 00:05:40 | Re : Formulaire, onchange et javascript

ghetto95
Merci de ton intérêt. Je n'ai pas copié tout le code. J'ai juste pris le nécessaire pour que l'on puisse m'aider à solutionner mon problème.... A la base, mon tableau ne comporte pas de "div", mais je pensai qu'il fallais que je les rajoute pour le "onchange" car je crois qu'il se base sur l'id et surtout le div pour délimité la partie à afficher. Je ne suis pas sur du tout de ce que je te dis... Je cherche justement à comprendre comment cela fonctionne.
samedi 28 mai 2011 à 01:27:55 | Re : Formulaire, onchange et javascript

007Julien

Un code plus parlant ?
Quelques précisions sous forme de commentaires

Code HTML :
// Qu'est ce que ce <td> sans <table> ni ouverture de ligne <tr> préalables ?
<td>Fruits et Légumes</td> 
<td> : </td> 
<td>
// Une div dans un <td> passe encore mais pourquoi la fermer avant la fin du select ?? 
<div> 
<select name="fretleg" onchange="????????"> 
</div> 
<option value="fruits">FRUITS</option> 
<option value="legumes">LEGUMES</option> 
</select>
// Une fermeture non ouverte de quelle ligne ???
</tr> 
// Un paragraphe et une div non fermés entre deux lignes ????
<p> 
<div id="fruits" style="display:block"> 
<tr> 
<td>Pomme</td> 
<td> : </td> 
<td> <input type="text" name="pomme" value="" size="23" maxlength="10"></td> 
</tr>
// De nouveau un paragraphe alors que l'autre n'est pas fermé ????? 
<p> 
<tr>


Même si l'on peut admettre que les premières balises figurent plus haut dans le code, les suivantes sont incompréhensibles. Comment les navigateurs pourraient-ils s'y retrouver ? Ce n'est pas possible des cliquer-déplacer vous jouent des tours ?
samedi 28 mai 2011 à 11:10:17 | Re : Formulaire, onchange et javascript

ghetto95
J'ai un peu retravaillé le code en tenant compte de vos commentaires. Concernant ma demande, j'aurai juste aimer que les champs qui sont dans le dans le div dont l'id=fruit s'affiche quand on sélectionne fruit dans le select et uniquement ceux là, et inversement pour les légumes (c-à-d que quand on selectionne légume, uniquement les champs légumes apparaissent et les champs fruits disparaissent). Merci de votre réponse.
samedi 28 mai 2011 à 11:11:41 | Re : Formulaire, onchange et javascript

ghetto95
Voilà le code :
Code HTML :
<html> 
<form>
<table>
  <tr>
  <td>Fruits et Légumes</td> 
  <td> : </td> 
  <td> 
    <select name="fretleg" onchange="????????"> 
    <option value="fruits">FRUITS</option> 
    <option value="legumes">LEGUMES</option> 
    </select></td>
  </tr>  
  <div id="fruits" style="display:block"> 
    <tr> 
    <td>Pomme</td> 
    <td> : </td> 
    <td> <input type="text" name="pomme" value="" size="23" maxlength="10"></td> 
    </tr> 
    <tr> 
    <td>Poire </td> 
    <td> : </td> 
    <td> <input type="text" name="poire" value="" size="23" maxlength="10"></td> 
    </tr> 
    <tr> 
    <td>Ananas</td> 
    <td> : </td> 
    <td> <input type="text" name="ananas" value="" size="23" maxlength="10"></td> 
    </tr> 
    <tr> 
    <td>Orange</td> 
    <td> : </td> 
    <td> <input type="text" name="orange" value="" size="23" maxlength="10"></td> 
    </tr> 
  </div> 

  <div id="legumes" style="display:none"> 
    <tr> 
    <td>Haricots </td> 
    <td> : </td> 
    <td> <input type="text" name="haricots" value="" size="23" maxlength="10"></td> 
    </tr>  
    <tr> 
    <td>Tomates</td> 
    <td> : </td> 
    <td> <input type="text" name="tomates" value="" size="23" maxlength="10"></td> 
    </tr> 
  </div> 
</table> 

<input type="submit" value="Envoyer" name="send"> 
</form> 
</html>
samedi 28 mai 2011 à 12:10:25 | Re : Formulaire, onchange et javascript

007Julien

Je suis mal expliqué.

Hormis quelques balises spécifiques (genre <tbody> ou <th>), la définition de tableaux en HTML ne souffre pas, entre les balises d'ouverture <table> et de fermeture </table>, d'autres éléments que des <tr> et des <td> !
Il n'est donc pas possible d'intercaler des div pour masquer certaines cellules !

Voici un code qui précise, en outre, comment appeler une fonction dans le onchange (le this designe l'objet select, le this.value la valeur de l'option sélectionnée).

Les fonctions aff et cch sont définies en javascript et comportent des alert pour montrer comment cela fonctionne.

Code HTML :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso8859-1">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title>Untitled</title>
<style type="text/css">
</style>
</head>
<body>
<select name="frtlgm" onchange="aff(this.value)"> 
    <option value="frt">Fruits</option> 
    <option value="lgm">Légumes</option> 
</select>
<div id="frt">
	<table>
		<tr><td>pommes</td></tr>
		<tr><td>poires</td></tr>
		<tr><td>bananes</td></tr>
	</table> 
</div>
<div id="lgm">
	<table>
		<tr><td>oignons</td></tr>
		<tr><td>poireaux</td></tr>
		<tr><td>carottes</td></tr>
	</table> 
</div>

<script type="text/javascript">
// Les id des elements 
var elm=['frt','lgm'];
function aff(e){alert('affiche '+e);
	var j;
	// Cacher tous les éléments
	for (j=0;j<elm.length;j++) cch(elm[j]);
	// Afficher celui-demandé
	document.getElementById(e).style.display='block';
}
function cch(e){ alert('cache '+e);
	// Cacher l'élément e
	document.getElementById(e).style.display='none';
}
cch('frt');
cch('lgm');
</script>
</body>
</html>
samedi 28 mai 2011 à 13:45:55 | Re : Formulaire, onchange et javascript

ghetto95
Génial et merci encore pour toutes ces informations et ce code. Cela fonctionne à merveille et je comprends mieux mes erreurs. Cependant, j'ai juste une question:
- Quand je sélectionne legume par exemple, il me dit qu'il affiche les legumes, ensuite qu'il cache les fruits et qu'il cache les légumes... Du coup, je ne comprends pas trop mais, le resultat est correct. Idem quand je sélectionne fruits.

Juste une petite remarque, quand on lance l'affichage de la page, par défaut, il est sur fruit, mais il ne nous affiche rien car on cache de base les fruits et les légumes... Donc je pense qu'il faut cacher uniquement les legumes au lieu des deux (tout en bas du script)...

Mais merci encore.

samedi 28 mai 2011 à 21:02:17 | Re : Formulaire, onchange et javascript

007Julien


Oui, effectivement, les instructions des fonctions sont exécutées pas à pas.

Ainsi la sélection de légumes lance la fonction affiche (l'argument e prenant la valeur lgm). Cette fonction lance alors l'alerte alert('affiche '+lgm).

Ensuite, elle commence par cacher tous les éléments en appelant la fonction cch() avec frt puis lgm. Cette fonction affiche à son tour l'alerte alert('cache '+ lgm) ... etc.

À l'ouverture de la page, les premières options ne sont pas sélectionnée mais seulement présélectionnée par le navigateur, l'ajout d'un attribut selected="selected" à une option quelconque entrainerait une vraie sélection mais présenterait l'inconvénient de neutraliser le onchange.
samedi 28 mai 2011 à 22:50:18 | Re : Formulaire, onchange et javascript

ghetto95
Merci beaucoup. Merci encore.


Cette discussion est classée dans : javascript, fonction, formulaire, champs, onchange

Répondre à ce message

Sujets en rapport avec ce message

verif formulaire. [ par kikos ] Slt à tous,j'utise une fonction javascript qui permet de vérifier qu'il n'y ai po de lettre dans le champs :function verifcode(car) {// exclusivement Une fonction javascript specifique à inclure dans le bouton valider [ par carmen256 ] J' ai un problème de code . Je voudrai insérer une fonction spécifique dans un bouton valider .Une page html nommé formulaire contient deux champs tex Vérifier le champs "heure" d'un formulaire [ par bcsh ] Bonjour à tous !J'ai besoin d'aide, car je cherche le moyen de controler par javascript si un champ dans lequel il faut insérer une certaine heure res Conserver les champs d'un formulaire après un reload [ par mdelepin ] Salut à tous,Voilà, je souhaiterais recharger une page tout en conservant les champs remplis du formulaire. Pour cela, je récupère les valeurs des cha fonction javascript [ par CHABRY ] Bonjour,j'ai voulu à travers un fichier .js valider un formulaire et précisément un champs "code postal" qui doit être un nombre.La fonction "is_num(i javascript onkeyup event.keyCode probleme [ par natsou_k ] Bonjour, j'ai un petit probleme en javascript voici mon appel de fonction et ma fonction :function clickformulaire(a,formulaire,element){ probleme de verification de formulaire avec remplissage des champs text dynamiquement [ par niko14 ] Salut tout le monde! Donc voila mon probl& Probleme d'execution PHP dans fonction javascript [ par mig49 ] Bonjour,J'ai un formulaire d'inscription, l'idée, c que le mot de passe envoyé est Hashé en javascript avant d'etre envoyé sur le serveur qui executer Validateurs de formulaire. [ par CHABRY ] Bonjour. On m'a demandé d'implémenter un ensemble de fonctions javascript GENERIQUES ayant pour rôle de valider les informations saisies lors d'un fo Fonction Javascript [ par yacouba85 ] Bonjour je voulais savoir s'il était possible d'insérer du code PHP dans une fonction javascript? comme ceci: function sauvegarder(formulaire, liste)


Nos sponsors


Sondage...

Comparez les prix


Motorola MILESTONE
Entre 489€ et 489€

Visiter le guide achat

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 1,186 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)