JavaScript dans les liens

Code JavaScript dans l'attribut href

Une URL peut désigner du code JavaScript. Le principe est simple, mettez le préfixe javascript: suivi de votre code JavaScript. Exemple avec le fameux lien <a href...> :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		<a href="javascript:alert('coucou');">cliquez ici</a>
	</body>
</html>

On peut bien entendu appeler une fonction :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script>
		function toto() {
			alert("Coucou");
			alert("Tu vas bien ?");
		}
		</script>
	</head>
	<body>
		<a href="javascript:toto()">cliquez ici</a>
	</body>
</html>

Code JavaScript dans l'attribut action du formulaire

Le lien JavaScript peut être utilisé comme action d'un formulaire, puisque l'attribut action de la balise <form> sert à appeler un lien suite à la soumission du formulaire.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script>
		function message() {
			alert("Coucou");
			alert("Tu vas bien ?");
		}
		</script>
	</head>
	<body>
		<form name="saisie" action="javascript:message();">
			<input type="submit">
		</form>
	</body>
</html>

On peut en profiter pour améliorer un peu les choses en récupérant les données du formulaire :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script>
		function reponse() {
			var prenom;
			prenom=document.getElementById("PrenomSaisi").value;
			alert("Bonjour " + prenom);
		}
		</script>
	</head>
	<body>
		<form name="saisie" action="javascript:reponse();">
			<label>Entrez votre prénom</label>
			<input type="text" id="PrenomSaisi">
			<input type="submit">
		</form>
	</body>
</html>

La propriété value représente le contenu du champ de texte nommé PrenomSaisi identifié par la méthode getElementById().

Variante sans préfixe javascript: avec l'événement onsubmit()

Le script précédent peut avoir cette variante sans URL grâce à l'événement JavaScript onsubmit(). Il n'est alors pas nécessaire d'utiliser le préfixe javascript: car un événement JavaScript ne sert qu'à appeler du code JavaScript, contrairement à l'attribut action ou href qui peuvent relier n'importe quel code au format HTML, PHP, CGI, etc.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script>
		function reponse() {
			var prenom;
			prenom=document.getElementById("nomSaisi").value;
			alert("Bonjour " + prenom);
		}
		</script>
	</head>
	<body>
		<form name="saisie" onsubmit="reponse()">
			<label>Entrez votre prénom</label>
			<input type="text" id="nomSaisi">
			<input type="submit">
		</form>
	</body>
</html>

Pourquoi ne pas utiliser l'événement onclick sur le bouton, plutôt que l'événement submit sur le formulaire ? Parce que l'événement onclick ne détecte que le clic sur le bouton, alors que submit détecte non seulement le clic, mais aussi l'appui sur la touche Entrée suite à la saisie du prénom.

Encore plus simple, l'événement onsubmit permet de se passer du bouton submit. Il suffira d'appuyer sur la touche Entrée suite à la saisie du prénom pour exécuter la réponse JavaScript.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script>
		function reponse() {
			var prenom;
			prenom=document.getElementById("nomSaisi").value;
			alert("Bonjour " + prenom);
		}
		</script>
	</head>
	<body>
		<form name="saisie" onsubmit="reponse()">
			<label>Entrez votre prénom</label>
			<input type="text" id="nomSaisi">
		</form>
	</body>
</html>

Voici donc quelques variantes de code, qui je l'espère, vous aideront à mieux comprendre les interactions entre des liens, des formulaires et le JavaScript.

Articles connexes

Lightbox simple avec jQuery Voici un code tout simple pour réaliser un effet Lightbox dans vos galeries d'images. Créez un dossier nommé Lightbox puis un sous-dossier img qui va contenir les images. Les v...
Gestion des fenêtres Il est possible de créer de nouvelles fenêtres, de contrôler leur aspect et de les refermer de manière dynamique. Le code ci-dessous, scindé en 3 pages, illustre ces possibilités....
jQuery UI jQuery UI est un complément de jQuery, qui permet notamment d’améliorer l’interface utilisateur. Beaucoup de confort ajouté ...
Les méthodes setTimeout() et setInterval() Voici deux fonctions très utiles qui permettent d'exécuter des fonctions dans un délai précisé en millisecondes. setTimeout("MaFonction()", 3000); Exécutera MaFonction() dan...
Contrôle des formulaires avec JavaScript Contrôle d'un formulaire de contact avec l'évènement submit Voici un exemple où le JavaScript bloque l'action du formulaire tant que les champs ne sont pas valides. Quelqu...