Formulaire qui apparait ou disparait
apprentiDev
Messages postés
171
Statut
Membre
-
apprentiDev -
apprentiDev -
Bonjour à toutes et à tous,
Je suis débutant en javascript, ( je n'y connait presque rien pour le moment) et je dois réaliser un formulaire qui se compose de deux parties. Une première partie qui s'affiche tout le temps, c'est le formulaire de base. Cependant si l'utilisateur le souhaite il doit pouvoir cliquer sur le lien "recherche avancé" et ce même lien dévoile la suite du formulaire ( sans changer de page, il faut obligatoirement rester sur la même page) , dans le même principe que sur google par exemple.
En regardant sur internet j'ai fini par trouver ce bout de code :
Si j'ai bien compris ca permet de faire quelque chose de similaire à ce que je veux faire.
Cependant je début en javascript et je n'ai pas compris comment on fait pour activer différentes fonctions.
Que me manque-t-il pour que ce formulaire puisse être modulable comme je le souhaite?
Je vous met ce que j'ai fait( les deux partie du formulaire plus ce bout de code) :
Je vous remercie d'avance pour votre aide.
Je suis débutant en javascript, ( je n'y connait presque rien pour le moment) et je dois réaliser un formulaire qui se compose de deux parties. Une première partie qui s'affiche tout le temps, c'est le formulaire de base. Cependant si l'utilisateur le souhaite il doit pouvoir cliquer sur le lien "recherche avancé" et ce même lien dévoile la suite du formulaire ( sans changer de page, il faut obligatoirement rester sur la même page) , dans le même principe que sur google par exemple.
En regardant sur internet j'ai fini par trouver ce bout de code :
<a href="#" onMouseOver="document.Img_1.src='image2.gif';" onMouseOut="document.Img_1.src='image1.gif';"> <img name="img_1" src="image1.gif"> </a>
var divFormulaire = document.getElementById("idDuDivFormulaire");
var divProfil = document.getElementById("idDuDivProfil");
boutonAfficheFormulaire .onclick = function {
divFormulaire.style.visibility = 'visible';
divProfil style.visibility = 'hidden';
}
boutonAfficheProfil .onclick = function {
divFormulaire.style.visibility = 'hidden';
divProfil style.visibility = 'visible';
}
Si j'ai bien compris ca permet de faire quelque chose de similaire à ce que je veux faire.
Cependant je début en javascript et je n'ai pas compris comment on fait pour activer différentes fonctions.
Que me manque-t-il pour que ce formulaire puisse être modulable comme je le souhaite?
Je vous met ce que j'ai fait( les deux partie du formulaire plus ce bout de code) :
/////////////////// formulaire de base///
echo '<form method="post" action="index.php?option=com_content&view=article&id=57&Itemid=103">';
//echo '<form method="post" action="resultat_images.php">';
echo '<p>' ;
echo '<br/>' ;
Pays:
<input type="text" name="pays" value="" size="20" maxlenght="20" />
<br />
<br />
Lieu géographique:
<input type="text" name="lieu_geo" value="" size="20" maxlenght="20" />
<br />
<br />
Longitude:
<input type="text" name="longitude" value="" size="20" maxlenght="20" />
<select name="long_sens">
<option value="N">Nord</option>
<option value="S" selected="selected">Sud</option>
</select>
<br />
<br />
Latitude:
<input type="text" name="latitude" value="" size="20" maxlenght="20" />
<select name="lati_sens">
<option value="O">Ouest</option>
<option value="E" selected="selected">Est</option>
</select>
<br />
<br />
/////////////////////////////////Fin du formulaire de base /////////
//////////////////////// Le lien qui doit afficher la partie recherche avancé /
<input type="submit" value="Recherche avance" />
/////////// début du bloc qui contient la deuxième partie du formulaire qui doit apparaitre ou disparaitre ///
<form id="form2">
<a href="rechercher_images.php">Recherche avancé</a>
var divFormulaire = document.getElementById("form2");
boutonAfficheFormulaire .onclick = function {
divform2.style.visibility = 'visible';
}
boutonAfficheProfil .onclick = function {
divform2.style.visibility = 'hidden';
}
<br />
<br />
Trace :
<input type="text" name="Trace" value="" />
<br />
<br />
Rang:
<input type="text" name="Rang" value="" />
<br />
<br />
Cannaux utilisés pour l\'image satelitaire :
<input type="text" name="Canal" value="" />
<br />
<br />
Numéro de Campagne :
<input type="text" name="Trace" value="" />
<br />
<br />
Nombre de photo par campagne :
<input type="text" name="Trace" value="" />
<br />
<br />
</form>
<input type="submit" value="Valider" />
</p>
</form>
Je vous remercie d'avance pour votre aide.
A voir également:
- Formulaire qui apparait ou disparait
- Whatsapp formulaire opposition - Guide
- Formulaire de réclamation facebook compte désactivé - Guide
- Clé usb n'apparait pas - Guide
- Formulaire de reclamation instagram - Guide
- Conversation snap qui disparait - Forum Snapchat
4 réponses
Utilises "return false;" pour annuler le clic sur le lien.
boutonAfficheFormulaire .onclick = function() {
// Le script
return false;
}
Je te remercie de ta réponse. Cependant je ne pense pas avoir compris du coup je vais te demander l'explication.
Pourquoi annuler le clic? Ce n'est pas en cliquant une deuxième fois que l'on déclenche le else?
Désolé de t'embête autant mais c'est pour bien comprendre sinon j'aurais la sensation d'avoir recopier bêtement ce que tu as dit sans cherche le pourquoi du comment.
Pourquoi annuler le clic? Ce n'est pas en cliquant une deuxième fois que l'on déclenche le else?
Désolé de t'embête autant mais c'est pour bien comprendre sinon j'aurais la sensation d'avoir recopier bêtement ce que tu as dit sans cherche le pourquoi du comment.
Encore merci avion-f16 pour ta patience et tes explications.
J'ai essayer et je n'ai plus d'erreur. Cependant la deuxième partie du formulaire est déjà affiché malgré l'instruction divFormulaire.style.visibility = \'hidden\'; que j'ai mis au départ.
Est ce que je l'ai mal formulé ?
Je vais essayer de créer une autre fonction pour ce paramètre. Il faut peut être une fonction de départ qui dit de cacher le formulaire et la deuxième qui module ce formulaire.
Autres questions : Est ce que l'on peut placer l'appel de plusieurs fonctions dans le body grâce à onLoad? Si oui est ce que l'on sépare l'appel des fonctions avec le point virgule?
De façon plus général quels sont les méthodes à utiliser pour voir les erreurs d'une fonction en javascript même si ces erreurs ne s'affichent pas à l'écran?
J'ai testé en mettant des fonctions mais ca ne marche pas. De plus j'ai essayé d'appeler les fonctions dans la balise body avec onLaod ou à dans le body en utilisant le nom de la fonction suivie de (); mais je n'ai toujours rien.
Si quelqu'un à une idée qu'il n'hésite pas.
J'ai essayer et je n'ai plus d'erreur. Cependant la deuxième partie du formulaire est déjà affiché malgré l'instruction divFormulaire.style.visibility = \'hidden\'; que j'ai mis au départ.
Est ce que je l'ai mal formulé ?
Je vais essayer de créer une autre fonction pour ce paramètre. Il faut peut être une fonction de départ qui dit de cacher le formulaire et la deuxième qui module ce formulaire.
Autres questions : Est ce que l'on peut placer l'appel de plusieurs fonctions dans le body grâce à onLoad? Si oui est ce que l'on sépare l'appel des fonctions avec le point virgule?
De façon plus général quels sont les méthodes à utiliser pour voir les erreurs d'une fonction en javascript même si ces erreurs ne s'affichent pas à l'écran?
J'ai testé en mettant des fonctions mais ca ne marche pas. De plus j'ai essayé d'appeler les fonctions dans la balise body avec onLaod ou à dans le body en utilisant le nom de la fonction suivie de (); mais je n'ai toujours rien.
Si quelqu'un à une idée qu'il n'hésite pas.
<script type="text/javascript">
window.onload = function() {
var divFormulaire = document.getElementById("form2");
var lien_avance= document.getElementById("lien");
divFormulaire.style.visibility = "hidden";
boutonAfficheFormulaire .onclick = function() {
divFormulaire.style.visibility = (divFormulaire.style.visibility = "hidden") ? 'visible' : 'hidden';
};
};
</script>
http://nicoweb.dixkey.com/lol/
:p
https://api.jquery.com/slideToggle/
3 ligne de codes :p
https://www.grafikart.fr/tutoriels/initiation-jquery-84
de rien et pense à mettre ton post comme resolu :D
Par contre pourquoi quand on appuie sur masquer les informations complémentaires certains champs complémentaires ne disparaissent pas.