[Résolu] Utilisation de "return false;"

C'est pourtant un comportement tout à fait normal !

D'abort un input de type reset a le comportement suivant, il met l'ensemble des champ d'un formulaire sur la valeur définit dans l'attribut value de chaque champs.

Maintenant, si tu veux un comportement plus elaboré, il faut que tu emplois du JavaScript, comme tu l'a fait.

Tu appelle ta fonction avec l'evenement onclick. Sur tout les navigateur, tous les evenements sont executé puis, en dernier lieu, le comportement normal de l'element utilisé s'applique. Pour pouvoir empecher ce comportement normal de ce réalisé, on ajoute l'intruction "return false" à la fin des instruction d'un evenement afin de bloquer la suite des evenement et le comportement normal.

Dans ton cas, il serait plus judicieux d'utilise un input de type button qui ne comporte aucun comportement par defaut... avec celui-ci, il n'est pas utile de mettre un "return false;" à la fin de ton gestionnaire d'evenement

Merci pour les réponses !

Je commence à comprendre les bases du Javascript. Je trouve que pour débuter, Javascript est plus dur que PHP car il y a pas mal de subtilités pour identifier et modifier des éléments (on doit souvent utiliser des fonctions, des getElementById, etc) mais bon je vais apprendre et Javascript est un bon moyen de décharger le serveur des tâches qui ne sont pas indispensables pour le visiteur.

Pour Lisarael:
C'est quoi modulariser le code? Tu donnes des ids et des classes aux éléments, comme en CSS? Tu mets l'attribut onclick dans un fichier externe?

parfaitement.

tu déclare tout tes onclick dans un fichier js.

la séparation complète du contenu et du dynamique.

edit: Oli grillé à 17s...
Modifié par Lisarael (15 May 2005 - 22:42)

lab_siteweb a écrit :

C'est quoi modulariser le code? Tu donnes des ids et des classes aux éléments, comme en CSS? Tu mets l'attribut onclick dans un fichier externe?

En gros c'est ça oui
Les class, peu d'utilité (même si on peut quand même s'en servir), il n'existe en effet pas de méthode getElementsByClass

L'idée, c'est d'extraire totalement le code JavaScript de la source HTML, comme on le fait avec CSS par exemle.

Ensutie, tu accèdes aux éléments avec onclick, onmouseover, getElementById, getElementsByTagName, le DOM etc

Les avantages inhérents à la séparation sont en partie identiques à ceux de la séparation contenu/mise en forme. Mais il y a des différences bien sûr

<edit>damn it ! grilled </edit>
Modifié par Olivier (15 May 2005 - 22:41)

Merci pour les précisions

Malgré votre aide, j'ai pas réussis à faire fonctionner le script en identifiant le bouton reset dans une page séparé

J'ai donné un id "raz" au bouton reset. Pour rappel, le champ à effacer a un id "eff" (oui je sais, je l'ai pas nommé clairement, mais c'est un code d'exemple ).

Maintenant, j'ai le code Javascript suivant :

function effacer() 
{ if (confirm("Êtes-vous sûr de vouloir effacer complètement le formulaire ?")==true){
	document.getElementById("eff").value = "";}
}

document.getElementById("raz").onclick = effacer();

Le problème, c'est que la fonction effacer() s'exécute au chargement de la page et non quand je clique sur le bouton reset, et en plus, pas correctement . (J'ai pas encore mis le return false; mais le problème ne vient sûrement pas de là parce que même en mettant un bête fonction alert("Efface");, la fonction est exécutée au chargement de la page (qu'il est bête ce Mozilla... à moins que j'aie fais une erreur dans mon code ))

Encore une question: savez-vous comment sélectionner tous les éléments d'un formulaire, plutôt que de faire cela:

document.forms['formulaire'].elements['nom'].value = "";
document.forms['formulaire'].elements['prenom'].value = "";
...

Merci de votre aide et j'ai oublié de dire que je trouvais Alsacréations super bien, les tutos HTML/CSS me sont d'un grande utilité !
Modifié par lab_siteweb (16 May 2005 - 13:08)

lab_siteweb a écrit :
Maintenant, j'ai le code Javascript suivant :

function effacer() 
{ if (confirm("Êtes-vous sûr de vouloir effacer complètement le formulaire ?")==true){
	document.getElementById("eff").value = "";}
}

document.getElementById("raz").onclick = effacer();

Le problème, c'est que la fonction effacer() s'exécute au chargement de la page et non quand je clique sur le bouton reset, et en plus, pas correctement . (J'ai pas encore mis le return false; mais le problème ne vient sûrement pas de là parce que même en mettant un bête fonction alert("Efface");, la fonction est exécutée au chargement de la page (qu'il est bête ce Mozilla... à moins que j'aie fais une erreur dans mon code ))

Tu as en effet une erreur dans ton code. Comme il est écrit actuellement tout bon navigateur va tout d'abord executer la fonction effacer() puis affecter sa valeur de retour (en l'occurence rien) dans la propriété onclick de l'élément "raz".
La bonne syntaxe :

document.getElementById("raz").onclick = effacer;

[EDIT]
Et pour l'accès à tous les éléments d'un formulaire essaie la syntaxe for (... in...), quelque chose comme ça :

for (el in document.forms['formulaire'].elements) {
...
}

Modifié par djfeat (16 May 2005 - 13:22)

Salut Djfeat et merci pour ta réponse,

malheureusement, je n'arrive toujours pas à placer l'évènement onclick dans un fichier séparé (alors que si je l'inclus directement dans mon code ça marche très bien...)

Voici les 2 fichiers:

function effacer() 
{ if (confirm("Êtes-vous sûr de vouloir effacer complètement le formulaire ?")==true){
	document.getElementById("eff").value = "";}
}
document.getElementById("raz").onclick = effacer;

...et XHTML

<form action="post">
<p><input id="eff" type="text" value="hello!!" /></p>
<p><input type="reset" id="raz" /></p>
</form>

Pour être sûr, j'ai rendu le html compatible XHTML 1.0 Strict, mais ça na rien changé, quand je clique sur le bouton reset il ne se passe rien

PS. Il manque le return: false dans le fichier externe, je ne sais pas comment l'attribuer (il y a déjà un point virgule dans la lige ), mais je ne pense pas que ça viennent de la, car même avec une bête fonction alert(); ça ne marche pas.

document.getElementById("raz").onclick = effacer;

En fait au moment où cette partie de code est executée l'élément "raz" n'existe pas encore (il arrive après dans la page), donc erreur javascript.

En fait il faut l'executée une fois le chargement de la page terminé, donc avec window.onload :

window.onload = function () {
    document.getElementById("raz").onclick = effacer;
}

Et pour le return false il suffit de le mettre dans la fonction effacer() :

function effacer()
{ if (confirm("Êtes-vous sûr de vouloir effacer complètement le formulaire ?")==true){
document.getElementById("eff").value = "";}
return false;
}

Merci beaucoup Djfeat!

Ca marche super bien !! Je ne savais pas que le Javascript était exécuté avant le HTML (en fait c'est logique puisque le lien vers le fichier .js est placé dans l'en-tête du HTML )

Je ne savais pas aussi qu'on pouvait avoir des fonctions sans nom...

Bref je vous remercie tous de votre aide, car vous m'avez permis de résoudre des problèmes pratiques en Javascript (les cours de base que j'ai trouvé sur internet sont plutôt théoriques, c'est parfois difficile de les utiliser pour faire quelque chose de précis quand on est débutant).