Interaction onclick et href sur une balise a

**Linio** · 13/02/2013, 17h03

Bonjour à tous,

J'ai un problème sur une application qui contient des balises a sur lesquelles il y a un attribut href et un attribut onclick.
L'idée est d'effectuer la fonction puis d'effectuer le href.
Cela se présente ainsi :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href="action.do?param=5" onclick="javascript:return sauvegarder();">lien</a>

La fonction fait un submit sur le form de la page :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
function sauvegarder() {
    if (document.forms[0].options.value == ' '){
                alert("Veuillez préalablement sélectionner une option.");
                return false;
            }
            else{
                document.forms[0].cmd.value='sauvegarder';
                document.forms[0].submit();
            }
    return true;
}

J'ai rajouté le return true, je pensais que le problème pouvait venir de là mais visiblement non.

Le problème est que le formulaire n'est jamais réellement envoyé à la page. Ma page action.do est un traitement en java qui n'est appelé que lorsque je mets un point d'arrêt sur le return true;
C'est comme si la fonction se déroulait trop rapidement et que l'envoi de mon formulaire ne se faisait pas (d'ailleurs avec firebug lorsque je fais le traitement normal, l'onglet réseau me montre le chargement de mon action.do en train de tourner éternellement et sans jamais aucune valeur de retour (et pour avoir un point d'arrêt sur mon application java, je sais que la page n'est effectivement jamais appelée)), et que le href soit chargé sans jamais que cette action soit effectuée.

What do developpez.net?

Vous avez une idée qui pourrait m'éclairer? Je sais que je pourrais faire une palanquée de traitement avec jquery et quelque chose de beaucoup plus propre probablement en faisant un appel Ajax, mais le système tel qu'il existe fonctionne sur IE6 (oui je sais, ça n'est pas réellement un exploit), j'aimerais comprendre pourquoi aujourd'hui sur des navigateurs modernes (firefox par ex.) ça ne fonctionne pas.

Merci.

(Accessoirement la balise code ne semble pas fonctionner quand je clique sur le petit dièse, obligé de les rajouter à la main)

**SpaceFrog** · 13/02/2013, 17h09

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href="action.do?param=5" onclick="return sauvegarder();">lien</a>

le onclick est executé en premier
si la fonction return false le href est inhibé
si elle retourne true le href est lancé

sauf que
dans ta fonction tu soumets le formulaire ...
=> tu quittes la page par l'action du form

**Linio** · 14/02/2013, 09h37

Dans ce cas là pourquoi c'est le href qui prend le "pas" sur la submission?

**Bovino** · 14/02/2013, 10h00

Tout d'abord, vouloir rediriger vers deux pages en même temps, c'est comme vouloir tourner en même temps à droite et à gauche : techniquement peu viable. Donc ton principal souci est de l'ordre de la conception de ton appli plus que du code.

Ensuite, pour répondre à ta question, le navigateur utilise une pile d'exécution.
Lors de ton clic sur le lien s'ajoutent à la pile le code du onclick puis la redirection du href.
Dans le code JavaScript, la soumission du formulaire est simplement ajoutée à la pile et n'interviendra alors qu'après avoir suivi le lien, à savoir jamais.

Pour t'en convaincre :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>Enchainement</title>
	<script>
                function noClick(){
                        alert('action js');
                        document.forms[0].submit();
                }
        </script>
</head>
<body>
	<a href="javascript:alert('lien href')" onclick="noClick()">Lien</a>
	<form action="javascript:alert('submit action')">
		<input name="foo" value="bar" />
		<input type="submit" value="Tester" name="toto" />
	</form>
</body>
</html>

**Linio** · 14/02/2013, 16h22

Je ne démentais pas que la conception était "naze", ce n'est pas la mienne, mais celle en place que je devais corriger, je cherchais à comprendre pourquoi ça pouvait fonctionner sur un navigateur et pas un autre.

Merci pour ces précisions qui clarifient tout à fait ce que je voulais savoir. (Bon je peux pas non plus mettre de smiley, décidément...)

J'ai corrigé le problème en faisant un appel ajax avec jQuery.

Merci!

Interaction onclick et href sur une balise a

JavaScript

Discussions similaires

Partager

Partager