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

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...
Les fonctions Une fonction est une portion de code ayant un but précis et que l'on utilise fréquemment. L'intérêt est d'éviter les répétitions dans vos codes, et de gagner en lisibilité. Le pri...
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...
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...
jQuery jQuery est une bibliothèque qui permet de simplifier la programmation JavaScript afin d'interagir plus efficacement avec l'utilisateur et d'animer plus facilement des contenus. ...