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