Visualiser le formulaire avant validation

Pour toutes les discussions javascript, jQuery et autres frameworks
Répondre
Tiffayme
Messages : 2
Enregistré le : 10 mai 2020, 09:43

Visualiser le formulaire avant validation

Message par Tiffayme » 10 mai 2020, 10:15

Bonjour,

je suis en train de créer un site d'annonces légales. Pour faciliter la rédaction des annonces, le client remplit uniquement des champs de formulaire.
Je souhaite créer un aperçu de ce formulaire à titre indicatif dans lequel j'aurai inséré du texte supplémentaire pour qu'il puisse pré-visualiser la rédaction de l'annonce telle qu'elle sera diffusée. (mon texte + les champs de formulaires)
Je souhaite que le résultat visualisé ou prévisualisé soit rempli automatiquement et en même temps que l'utilisateur saisit ses données (cet encart se trouvera sur la barre latérale).
Cet aperçu permettra aux clients de confirmer que les informations qu'ils ont entrées sont correctes et de confirmer leur validation.

Quelqu'un aurait-il un code javascript à me proposer ?

Merci par avance

Avatar du membre
webmaster
Administrateur du site
Messages : 563
Enregistré le : 28 févr. 2017, 15:19

Re: Visualiser le formulaire avant validation

Message par webmaster » 11 mai 2020, 10:18

Bonjour

J'ai fait un petit script de démo ici:
https://www.toutjavascript.com/user/previewform.html

C'est assez simple finalement.
Il faut une minuterie qui se déclenche régulièrement et qui va construire le texte avec les éléments du formulaire pour l'envoyer dans la zone de preview.

Code : Tout sélectionner

<script>			
	var texte="Bonjour <b>{prenom}</b> <br> Voici le texte du form...";
	var myForm=document.forms["myForm"];
	
	setInterval(function() {
		var prenom=myForm.prenom.value;
		// desactiver les éventuelles balises de prenom 
		prenom=encodeURIComponent(prenom);
		
		// creer le preview
			var t=texte;
		t=t.replace("{prenom}", prenom);
		
		document.getElementById("preview").innerHTML=t;
		
	}, 100);
</script>
TJS : 25 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

Tiffayme
Messages : 2
Enregistré le : 10 mai 2020, 09:43

Re: Visualiser le formulaire avant validation

Message par Tiffayme » 11 mai 2020, 15:07

Bonjour et merci beaucoup pour le script ! Je vais tenter de l'appliquer sur mes formulaires !

Répondre