Garder une propriete active apres validation d'un formulaire
sikito
-
sikito Messages postés 1 Statut Membre -
sikito Messages postés 1 Statut Membre -
Bonjour, mon problème est tres simple mais je trouve aucune solution!!! En fait j'ai une fonction javascript qui est appellé ; quand on valide un formulaire (onsubmit) on fait apparaitre une liste qui est cachee au depart (visibility : hidden). Le code marche mais ma liste apparait très vite mais disparait aussitot alors que j'ai envie que le changement soit permanent.
<script language="javascript">
function afficher(){
if (document.forms.formulaire.livre.value == ""){
alert('La saisie est obligatoire');
return false;
}
if (document.forms.formulaire.livre.value == "le rouge et le noir"){
return document.getElementById('liste').style.visibility="visible";
}
else {
alert('Livre non disponible');
return false;
}
}
</script>
<div id="header">
<FORM id="choix" onsubmit="return afficher();" NAME="formulaire" METHOD="post" ENCTYPE="text/plain">
Veuillez Entrer le titre du livre:<INPUT TYPE="text" NAME="livre">
<button TYPE="submit">Valider</button>
</FORM>
</div>
<div id="sidebar1">
<ul id="liste">
<li><a href="..." title="aller à la Chapitre 1">Chapitre 1</a></li>
<li><a href="..." title="aller à la Chapitre 2">Chapitre 2</a></li>
<li><a href="..." title="aller à la Chapitre 3">Chapitre 3</a></li>
<li><a href="..." title="aller à la Chapitre 4">Chapitre 4</a></li>
<li><a href="..." title="aller à la Chapitre 5">Chapitre 5</a></li>
</ul>
</div>
<script language="javascript">
function afficher(){
if (document.forms.formulaire.livre.value == ""){
alert('La saisie est obligatoire');
return false;
}
if (document.forms.formulaire.livre.value == "le rouge et le noir"){
return document.getElementById('liste').style.visibility="visible";
}
else {
alert('Livre non disponible');
return false;
}
}
</script>
<div id="header">
<FORM id="choix" onsubmit="return afficher();" NAME="formulaire" METHOD="post" ENCTYPE="text/plain">
Veuillez Entrer le titre du livre:<INPUT TYPE="text" NAME="livre">
<button TYPE="submit">Valider</button>
</FORM>
</div>
<div id="sidebar1">
<ul id="liste">
<li><a href="..." title="aller à la Chapitre 1">Chapitre 1</a></li>
<li><a href="..." title="aller à la Chapitre 2">Chapitre 2</a></li>
<li><a href="..." title="aller à la Chapitre 3">Chapitre 3</a></li>
<li><a href="..." title="aller à la Chapitre 4">Chapitre 4</a></li>
<li><a href="..." title="aller à la Chapitre 5">Chapitre 5</a></li>
</ul>
</div>
A voir également:
- Garder une propriete active apres validation d'un formulaire
- Whatsapp formulaire opposition - Guide
- Formulaire de réclamation facebook compte désactivé - Guide
- Formulaire de reclamation instagram - Guide
- Impossible d'utiliser ce numéro de téléphone pour la validation - Forum Gmail
- Temps validation annonce le bon coin - Forum Hotmail / Outlook.com
2 réponses
Bonjour
Cette ligne est écrite d'une manière inhabituelle, probablement par erreur :
Quand tu tapes le bon titre, cette ligne renvoie "true" donc le formulaire est envoyé, donc la page est complètement réaffichée. Donc le titre disparaît du champ de saisie, et la liste est à nouveau hidden
Il faut modifier cette ligne pour qu'elle rende false aussi :
Et si tu veux quand même envoyer ton formulaire en gardant l'affichage, il faut utiliser php, éventuellement avec Ajax, pour traiter le formulaire côté serveur et le renvoyer pré-rempli et non plus vide.
Cette ligne est écrite d'une manière inhabituelle, probablement par erreur :
return document.getElementById('liste').style.visibility="visible";
Quand tu tapes le bon titre, cette ligne renvoie "true" donc le formulaire est envoyé, donc la page est complètement réaffichée. Donc le titre disparaît du champ de saisie, et la liste est à nouveau hidden
Il faut modifier cette ligne pour qu'elle rende false aussi :
document.getElementById('liste').style.visibility="visible";
return false;
Et si tu veux quand même envoyer ton formulaire en gardant l'affichage, il faut utiliser php, éventuellement avec Ajax, pour traiter le formulaire côté serveur et le renvoyer pré-rempli et non plus vide.
sikito
Merci beaucoup ca marche sans soucis. je compte utiliser du php par la suite pour completer mon code mais je bloquais sur ça.
J'ai le meme probleme mais cette fois avec un div qui a la propriete visibility: hidden et je veux que quand on clique sur un lien sa visibilte change.
voici le code html:
<div id ="chapitre1">
<h2> Chapitre 1 </h2>
At vero eos et accusam et justo duo dolores et ea rebum. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum.
</div>
<div id="sidebar1">
<ul id="liste">
<li><a href="" onclick="javascript:return visibilite();" title="aller à la Chapitre 1">Chapitre 1</a></li>
<li><a href="..." title="aller à la Chapitre 2">Chapitre 2</a></li>
</ul>
</div>
code javascript:
function visibilite(){
if (document.getElementById('chapitre1').style.visibility == "hidden"){
document.getElementById('chapitre1').style.visibility="visible";
return false;
}
}
voici le code html:
<div id ="chapitre1">
<h2> Chapitre 1 </h2>
At vero eos et accusam et justo duo dolores et ea rebum. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum.
</div>
<div id="sidebar1">
<ul id="liste">
<li><a href="" onclick="javascript:return visibilite();" title="aller à la Chapitre 1">Chapitre 1</a></li>
<li><a href="..." title="aller à la Chapitre 2">Chapitre 2</a></li>
</ul>
</div>
code javascript:
function visibilite(){
if (document.getElementById('chapitre1').style.visibility == "hidden"){
document.getElementById('chapitre1').style.visibility="visible";
return false;
}
}