Rendre image visible sur le page lors de l'envoi formulaire

Fermé

basix - Modifié par basix le 4/08/2014 à 03:21
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 - 5 août 2014 à 14:53

Bonjour,

je rencontre un petit problème, j'ai une image sur mon site web, portant comme nom "image_5", j'ai aussi un formulaire, comme ceci:

<form name="commande" action="Box2.Show();" onSubmit="return verif_commande()">

<input type="text" name="nocommande" STYLE="color: #FFFFFF; font-family: Verdana; font-weight: bold; font-size: 12px; background-color: #0078ff;" color: #FFFFFF; placeholder="  Numéro de commande">

<br>

<input type="text" name="mailing" STYLE="color: #FFFFFF; font-family: Verdana; font-weight: bold; font-size: 12px; background-color: #0078ff;" color: #FFFFFF; placeholder="        Adresse E-mail">

<input type="hidden" name="epictroll">

<input type="submit" value="Vérifier la commande"
style="color: #FFFFFF; font-family: Verdana; font-weight: bold; font-size: 12px; background-color: #15b000;" color:="" #ffffff;="rheht">
</form>

le code javascript liée a se formulaire:

<script type="text/javascript">
<!--
function verif_commande()
{
 if(document.commande.nocommande.value == "")  {
   alert("Veuillez entrer un N° de commande!");
   document.commande.nocommande.focus();
   return false;
}

 if(document.commande.mailing.value == "") {
   alert("Veuillez entrer votre adresse électronique!");
   document.commande.mailing.focus();
   return false;
}

 if(document.commande.mailing.value.indexOf('@') == -1) {
   alert("Utilisez un adresse éléctronique valide!");
   document.commande.mailing.focus();
   return false;
}

 if(document.commande.epictroll.value == "")  {
   alert("Le n° de commande est inéxistant!");
   document.commande.epictroll.focus();
   return false;
}}
//-->
</script>

<body bgcolor="#EEEEEE" text="#000000">

Voila, jusque la, tout est fonctionnel, se que je souhaiterais faire, c'est lorsque j'appui sur le bouton envoyer du formulaire, mon "image_5" se rend visible sur la page (car avant de valider le formulaire celui-ci est volontairement caché), je ne veut pas que celui-ci envoi un email ou autre, juste qu'il le rendre visible :)

Merci pour vos réponses !

A voir également:

Rendre image visible sur le page lors de l'envoi formulaire
Supprimer une page word - Guide
Image iso - Guide
Consultez le code source de cette page. copiez la ligne qui indique aux moteurs de recherche de ne pas référencer la page. ✓ - Forum Référencement
Page d'accueil iphone - Guide
Traduire une page web - Guide

6 réponses

Réponse 1 / 6

DDD
4 août 2014 à 10:03

Alors dans un premier temps, utilises du CSS ça aide à ne pas polluer ton code HTML.

De deux je ne comprends pas vraiment ce que tu veux faire avec l'image, tu as besoin qu'elle soit devant quel formulaire jusqu'à quand?

Je ne comprends pas l'idée d'envoyer un mail.

Et aussi, disable est ton ami si tu veux empêcher l'utilisation de ton formulaire mais faut le faire juste après l'envoi du formulaire sinon le form n'envoie pas.

Réponse 2 / 6

basix
Modifié par basix le 4/08/2014 à 12:39

je veux tout simplement que lorsque le formulaire est validé par le visiteur que l'image caché se rende visible.

Réponse 3 / 6

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 524
4 août 2014 à 16:19

Salut,

Une solution possible en php :

1 - créer un script php pour traiter le formulaire
1.1 - dans le traitement, si les données envoyées sont valides, on crée une variable de session php pour autoriser la consultation de l'image et on redirige vers la page affichant l'image
2 - créer la page php affichant l'image
2.2 - au début de la page, on vérifie si la variable de session existe (est-ce que l'utilisateur a envoyé le formulaire ?) et on affiche ou non l'image

Cette solution est la plus "correcte" dans le sens ou l'utilisateur ne pourra pas voir l'image tant que le formulaire n'aura pas été envoyée.

Une autre solution possible en javascript :

On inclus l'image avec le formulaire sur la première page en lui affectant le style css "display: none" pour cacher l'image.
Lorsqu'on clique sur le bouton valider du form, on change en javacript le style de l'image pour l'afficher.

Cette solution est très facile à mettre en place, mais il suffit de regarder le code source de la page pour trouver le lien direct de l'image sans passer par le formulaire.

Bonne journée

Réponse 4 / 6

basix
4 août 2014 à 20:26

Voici ma partition de code actuel qui m'interesse:

<form name="commande" action="Box2.Show();" onSubmit="return verif_commande()">

j'ai caché une image sur la page ( sa on s'en préoccupe pas, s'est déjà fait )

Lorsque la personne qui remplit mon formulaire valide le formulaire, je veux tout simplement que l'image caché se rendre visible, rien de plus, je ne veux pas que le formulaire envoye un mail et je veux pas que celui-ci redirige autre part, juste qu'il rende visible l'image de la page

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 6

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 524
5 août 2014 à 01:20

Puisque tu n'utilises pas de script serveur pour traiter ton formulaire, tu dois afficher ton image via javascript dans la fonction qui est déclenché à la soumission du formulaire (onSubmit="return verif_commande()") :

function verif_commande()
{
	if(document.commande.nocommande.value == "")  {
		alert("Veuillez entrer un N° de commande!");
		document.commande.nocommande.focus();
		return false;
	}

	if(document.commande.mailing.value == "") {
		alert("Veuillez entrer votre adresse électronique!");
		document.commande.mailing.focus();
		return false;
	}

	if(document.commande.mailing.value.indexOf('@') == -1) {
		alert("Utilisez un adresse éléctronique valide!");
		document.commande.mailing.focus();
		return false;
	}

	if(document.commande.epictroll.value == "")  {
		alert("Le n° de commande est inéxistant!");
		document.commande.epictroll.focus();
		return false;
	}
	
        alert("La commande est valide, on peut afficher l'image");
	// le code pour afficher ton image ici
}

j'ai caché une image sur la page ( sa on s'en préoccupe pas, s'est déjà fait )
Mais c'est pourtant le but de ta question. Pour savoir comment afficher l'image, il faudrait d'abord savoir comment tu la cache ;)

Réponse 6 / 6

basix
5 août 2014 à 14:29

Je voudrais afficher l'image lors de la validation du formulaire ( lorsque celui-ci est correctement remplie )

il faut donc que j'ajoute le code pour dire a mon formulaire d'afficher cette image, voici le code concerné

<form action="page.html" method="post" enctype="application/x-www-form-urlencoded" name="commande"  onSubmit="return checking();">

la, il redirige vers "page.html", mais moi je ne souhaite pas qu'il redirectionne, je veux juste qu'il affiche une image.

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 524
5 août 2014 à 14:53

Tu as lu mon dernier message ?

Je t'ai indiqué l'endroit où tu dois mettre le code pour afficher l'image lorsque tu valides le formulaire à partir de ton premier code. Il suffit juste de savoir quel code mettre pour afficher l'image, et pour cela il faut savoir comment tu as caché l'image (pour faire l'inverse).

Donc, comment est caché ton image sur ta page ?

Discussions similaires

Retrouver l'image originale après avoir fait des modifications ?

'Votre colis est dans le site de livraison qui dessert votre adresse' que faire

[PIX] Commencer chaque poème sur une nouvelle page

Chemin Logo du site de la Cité de l'espace

Échec d’envoie message messenger

Discussions similaires

Newsletters