Comportement étrange d'un formulaire avec Javascript

a marqué ce sujet comme résolu.

Bonjour, en vue d’un test, j’ai créé un formulaire qui reçoit dans un input un nom saisi par le client. Un bouton déclenche un script qui récupère le nom et l’affiche dans un second input. Le comportement étrange est que le script fait bien son travail… durant une seconde, ensuite les deux champs input s’effacent inexplicablement. Je vous joins ci-dessous le code HTML/Javascript. Merci pour le temps passé à étudier ce problème. Daniel

<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="UTF-8">
		<title>Problème</title>
	</head>
	<body>
		<form>
			<label>Prénom :</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<input type="text" id="firstname" size="10" placeholder="Prénom"
			autofocus><br/>
			<button id="btn1">
				Calcul
			</button><br/>
			<label>Résultat :</label>
			<input type="text" id="resultNamejs" size="10" placeholder="Résultat JS"><br/>
		</form>
		<!-- DÉBUT DU SCRIPT -->
		<script type="text/javascript">
			var btn1=document.getElementById("btn1");
			btn1.addEventListener("click", function() {
				var firstname = document.getElementById("firstname").value;
			    document.getElementById("resultNamejs").value=firstname;
			}, false);
		</script>
	</body>
</html>
+0 -0

Lorsqu’un <button> se trouve dans un <form>, son type est "submit" par défaut. Cela fait que lorsqu’on clique sur ce bouton, le contenu du formulaire est envoyé au serveur web qui renvoie une nouvelle page. En l’occurrence, cela recharge simplement la même page, c’est pourquoi les champs redeviennent vides.

Pour corriger ce problème, il suffit de définir explicitement le type du bouton à "button" :

<button type="button" id="btn1">
    Calcul
</button>
+1 -0
Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte