Comment copier un formulaire HTML dans un autre formulaire ?

Réponses rédigées par Antoine

Dernière mise à jour : 2022-04-07 15:22:36

Question

Bonjour, j'ai un formulaire HTML qui concerne une adresse de facturation et un second pour l'adresse de livraison, je voudrais que lorsque l'utilisateur coche une case, ça copie le contenu du premier formulaire et ça le mette dans le second.

Réponse

Pour copier un formulaire HTML dans un autre formulaire, vous pouvez identifier les champs avec un id, puis utiliser la méthode getElementById() pour récupérer leurs valeurs.

On crée ainsi une fonction JavaScript qu'on exécute via un évènement onChange que l'on place sur la case à cocher.

Voici un exemple pour copier un input HTML dans un autre input lorsqu'une case est cochée :

<!DOCTYPE html> 
<html> 
<head>
<meta charset="UTF-8">
<title>Comment copier un formulaire HTML dans un autre formulaire ?</title>
</head>
<body>
<form>
  <input type="text" id="adresse_facturation" placeholder="Adresse de facturation">
</form>
<input type="checkbox" id="case" onchange="copierFormulaire()"> Cochez la case si l'adresse de livraison est identique à l'adresse de facturation
<form>
  <input type="text" id="adresse_livraison" placeholder="Adresse de livraison">
</form>
<script>
function copierFormulaire() 
{
  if (document.getElementById("case").checked) 
  {
    document.getElementById("adresse_livraison").value = document.getElementById("adresse_facturation").value;
  } 
  else 
  {
    document.getElementById("adresse_livraison").value = "";
  }
}
</script>
</body>
</html>