11540 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Validation d'un formulaire sans changer de page.

Bonjour,

Me revoilà ! (J'en profites pour passer un coucou à petibato qui m'a bien aidé la dernière fois !)

Le Problème :
J'ai un petit soucis avec un formulaire. J'aurais besoin de l'activer avec le php et aussi ajouter un message comme quoi le mail a bien était envoyé à la fin de l'opération tout en restant sur la page de base (dans le div id="successMessage").
Et si je peux ajouter une sécurité style Captcha ou autres, je suis preneur aussi.

Pour l'instant, j'ai donc le formulaire sur la page de base ainsi qu'un code très, trop simplifié php.
Je suppose que j'ai besoin d'un peu de code JavaScript aussi mais je m'y perd ! Smiley cligne

Voici donc les codes >>

Formulaire sur la page html :

<form method="post" action="mail.php" class="form-contact">
							<ul class="unstyled">
								<li class="row-fluid">
									<p class="span6"><input name="name" id="contactName" placeholder="Nom" class="span12" type="text"></p>
									<p class="span6"><input name="email" id="contactEmail" placeholder="E-mail" class="span12" type="text"></p>
								</li>
								<li class="row-fluid">
									<p class="span12"><input name="subject" id="contactSubject" placeholder="Sujet" class="span12" type="text"></p>
								</li>
								<li class="row-fluid">
									<p class="span12"><textarea name="message" id="contactText" class="span12" rows="8"></textarea></p>
								</li>
								<li class="row-fluid">
									<p class="span6">
										<label class="checkbox">
											<input value="contact" type="checkbox">
											Recevoir une copie par e-mail.
										</label>
									</p>
									<p class="span6">
										<button type="submit" class="btn btn-primary btn-large pull-right">Envoyer le message</button>
									</p>
								</li>
							</ul>
						</form>

<div id="successMessage"></div>


mail.php :


<?php

$EmailFrom = "message@monsite.com"; 
$EmailTo = "contact@monsite.com"; 
$Subject = "Message pour Moi"; // Email Subject Title

$Name = Trim(stripslashes($_POST['name'])); 
$Email = Trim(stripslashes($_POST['email']));
$Sujet = Trim(stripslashes($_POST['subject']));  
$Message = Trim(stripslashes($_POST['message'])); 

// Validation
$validationOK=true;
if (!$validationOK) {
  exit;
}

// Setup the Body of the Email
$Body = "";
$Body .= "Name: ";
$Body .= $Name;
$Body .= "\n";
$Body .= "Email: ";
$Body .= $Email;
$Body .= "\n";
$Body .= "Sujet: ";
$Body .= $Sujet;
$Body .= "\n";
$Body .= "Message: ";
$Body .= $Message;
$Body .= "\n";

// Send Email 
$success = mail($EmailTo, $Subject, $Body, "From: <$EmailFrom>");
?>


Merci d'avance pour votre aide.

Edit : Alors, personne pour m'aider ?!
Modifié par kenzo082 (04 Oct 2013 - 18:38)
Salut Kenzo082,

Merci pour le clin d'oeil.

Franchement, je ne sais pas trop par quel bout prendre ta question. Grosso modo, la réponse c'est Ajax. Je t'invite donc plutôt à chercher sur le Net des infos sur la soumission Ajax des formulaires, faire des essais, et de revenir sur le forum si t'es en galère. La première fois qu'on se frotte à Ajax, c'est l'aventure, mais ça vaut le coup !
Re !
ça fait 3 jours que je recherche sans avancer !
Dernièrement, j'ai réussi avec l'Ajax, a rester sur la même page ... mais je ne reçois plus le mail.
Je m'y perd complet.
Le seul truc que je veux, c'est un formulaire de ce type :
http://www.mgakashim.com/2013/01/22/bootstrap-contact-form-with-validation-in-PHP/

sauf qu'il n'a pas l'air de bien fonctionner. Et vu qu'il est assez complexe, je ne sais pas où se trouve l'erreur !

Du coup, en ce moment, j'ai ça :

fichier contact.html


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Formulaire de mon site</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="Test formulaire pour mon site." />
<meta name="keywords" content="formulaire, test, html5" />

<script src="assets/js/jquery-1.8.2.min.js"></script>
<!--<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>-->

<script>

</script>

<link href="assets/css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" media="all" />
<link href="assets/css/css_mel.css" rel="stylesheet" type="text/css" media="all" />

</head>

<body>

<header class="container">
</header><!--container-->

<section class="container">
<div id="form_contact">
    <form action="process.php" id="contact" method="POST">
        <p>
            <label for="nom" class="nom">Nom</label>
            <br /><input id="nom" name="nom" type="text">
            <span id="msg_nom"></span>
        </p>
        <p>
            <label for="sujet" class="sujet">Sujet</label>
            <br /><input id="sujet" name="sujet" type="text">
            <span id="msg_sujet"></span>
        </p>
        <p>
            <label for="email">Email</label>
            <br /><input id="email" name="email" type="text">
            <span id="msg_email"></span>
        </p>
        <p>
            <label for="message">Message</label>
            <br /><textarea id="message" name="message" rows="10" cols="80"></textarea>
           <span id="msg_message"></span>
        </p>
        <p>
            <input type="submit" value="Envoyer" />
        </p>
    </form>
    <span id="msg_all"></span>
</div><!-- end of #form_contact -->
</section><!--container-->

<footer class="container marge_haut_taille_grand marge_bas_taille_grand">
<script type="text/javascript">
    $(function(){
        $("#contact").submit(function(event){
            var nom        = $("#nom").val();
            var sujet      = $("#sujet").val();
            var email      = $("#email").val();
            var message    = $("#message").val();
            var dataString = nom + sujet + email + message;
            var msg_all    = 'Merci de remplir tous les champs';
            var msg_alert  = 'Merci de remplir ce champs';
            if(dataString  == '')
            {
                $('#msg_all').html(msg_all);
            }
            else if(nom == '')
            {
                $('#msg_nom').html(msg_alert);
            }
            else if(sujet == '')
            {
                $('#msg_sujet').html(msg_alert);
            }
            else if(email == '')
            {
                $('#msg_email').html(msg_alert);
            }
            else if(message == '')
            {
                $('#msg_message').html(msg_alert);
            }
            else
            {
                $.ajax({
                    type : "POST",
                    url: $(this).attr('action'),
                    data: $(this).serialize(),
                    success : function(){
                        $('#contact').html('<p>Formulaire bien envoyé</p>');
                    },
                    error: function(){
                        $('#contact').html("<p>Erreur d'appel, le formulaire ne peut pas fonctionner</p>");
                    }
                });
            }
            return false;
        });
    });
</script>
</footer><!--container-->

</body>
</html>



fichier process.php

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<?php
 
    // CONDITIONS NOM
    if ( (isset($_POST['nom'])) && (strlen(trim($_POST['nom'])) > 0) ):
        $nom = stripslashes(strip_tags($_POST['nom']));
    else:
        echo "Merci d'écrire un nom <br />";
        $nom = '';
    endif;
 
    // CONDITIONS SUJET
    if ( (isset($_POST['sujet'])) && (strlen(trim($_POST['sujet'])) > 0) ):
        $sujet = stripslashes(strip_tags($_POST['sujet']));
    else:
        echo "Merci d'écrire un sujet <br />";
        $sujet = '';
    endif;
  
    // CONDITIONS EMAIL
    if ( (isset($_POST['email'])) && (strlen(trim($_POST['email'])) > 0) && (filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) ):
        $email = stripslashes(strip_tags($_POST['email']));
    elseif (empty($_POST['email'])):
        echo "Merci d'écrire une adresse email <br />";
        $email = '';
    else:
        echo 'Email invalide  [decu]<br />';
        $email = '';
    endif;
  
    // CONDITIONS MESSAGE
    if ( (isset($_POST['message'])) && (strlen(trim($_POST['message'])) > 0) ):
        $message = stripslashes(strip_tags($_POST['message']));
    else:
        echo "Merci d'écrire un message<br />";
        $message = '';
    endif;
  
    // Les messages d'erreurs ci-dessus s'afficheront si Javascript est désactivé
 
 
    // PREPARATION DES DONNEES
    $ip           = $_SERVER['REMOTE_ADDR'];
    $hostname     = gethostbyaddr($_SERVER['REMOTE_ADDR']);
    // $destinataire = "";
	
	$email = $_POST['email']; // obligatoire
	$EmailTo = "lesite@hotmail.fr"; // Your Email (Where the Messages Are Sent)
	// $Subject = "Message pour le site"; // Email Subject Title
	
    $objet        = "[le site] " . $sujet;
    $contenu      = "Nom de l'expéditeur : " . $nom . "\r\n";
    $contenu     .= $message."\r\n\n";
    $contenu     .= "Adresse IP de l'expéditeur : " . $ip . "\r\n";
    $contenu     .= "DLSAM : " . $hostname;
  
    $headers  = 'From: ' . $email . ' \r\n'; // ici l'expediteur du mail
    $headers .= 'Content-Type: text/plain; charset="ISO-8859-1"; DelSp="Yes"; format=flowed \r\n';
    $headers .= 'Content-Disposition: inline \r\n';
    $headers .= 'Content-Transfer-Encoding: 7bit \r\n';
    $headers .= 'MIME-Version: 1.0';
     
 
    // SI LES CHAMPS SONT MAL REMPLIS
    if ( (empty($nom)) && (empty($sujet)) && (empty($email)) && (!filter_var($email, FILTER_VALIDATE_EMAIL)) && (empty($message)) ):
        echo 'echec  [decu] <br /><a href="contact.html">Retour au formulaire</a>';
    // ENCAPSULATION DES DONNEES
    else:
        mail($EmailTo,$objet,utf8_decode($contenu),$headers);
        echo 'Formulaire envoyé';
    endif;
	
	
	// Send Email 
	$success = mail($EmailTo, $objet, $contenu, "From: <$Email>");
 
    // Les messages d'erreurs ci-dessus s'afficheront si Javascript est désactivé
?>


Et ça ne marche pas ! Puisque bizarrement, je ne reçois pas les mails.
Sérieux, je suis complètement perdu. Aidez-moi svp !

Merci d'avance. Je désespère.
Modifié par kenzo082 (08 Oct 2013 - 14:12)
Bonjour à toutes et à tous.

kenzo082 a écrit :
J'ai un petit soucis avec un formulaire. J'aurais besoin de l'activer avec le php et aussi ajouter un message comme quoi le mail a bien était envoyé à la fin de l'opération tout en restant sur la page de base (dans le div id=&quot;successMessage&quot;).
Et si je peux ajouter une sécurité style Captcha ou autres, je suis preneur aussi.

Pour l'instant, j'ai donc le formulaire sur la page de base ainsi qu'un code très, trop simplifié php.
Je suppose que j'ai besoin d'un peu de code JavaScript aussi mais je m'y perd !

Je vais faire une tentative d'interprétation de ce que tu désires faire.

1) tu veux un formulaire pour envoyer un message.
Mais tu désires que le formulaire et son analyse se fasse dans le même document php.

2) tu peux dans un premier temps afficher le formulaire.
L'utilisateur valide le formulaire !
Deux cas :
--> une erreur est détectée et tu reviens sur l'affichage du formulaire.
--> pas d'erreur, tu n'affiches plus le formulaire mais tu indiques que le message à bien été envoyé.

3) Pas besoin d'Ajax pour faire cela.
Veux-tu une solution PHP ou JavaScript ?
Le mieux est de faire cela en php.

@+
Hello Tournikoti,

alors pour te répondre :

1)
Pas exactement , j'ai un site "one page" avec un formulaire de contact, et j'aimerai donc soumettre le formulaire via javaScript (et il me semble de l'ajax) avec l'analyse qui se fait via le fichier php qu'on appelle via action. Mais qui ne sera pas visible par l'utilisateur.

2) Oui, c'est ça ou alors on peut même laisser le formulaire et juste ajouter une ligne disant que le formulaire a bien été envoyé lors que la soumission est faite.

3) Je penses que je ne peux pas passer à côté du Php. C'est l'action du formulaire !
Salut Kenzo082.

Pour un simple formulaire, je ne vois pas trop l'intérêt d'ajax.
On verra cela par la suite, si tu le veux bien.

Je te donne un exemple de flip flop en php avec pour le flip le formulaire et pour le flop un simple message.

Voici le code php réalisant cela :
<!doctype html>
<html lang="fr">
<head>
<!-- ==== -->
<!-- Meta -->
<!-- ==== -->
<meta charset="ISO-8859-15" />
<title>Flip Flop</title>

<!-- ===================== -->
<!-- Cascading Style Sheet -->
<!-- ===================== -->

<link rel="stylesheet" type="text/css" href="Styles.css" />
</head>

<body>
<?php
	extract ($_POST);

	if (!isset($var))
		$var = 1;
	else
	{
		if ($nom == "oui")
				$var = 2;
		else	$var = 1;
	}

	if ($var == 1)
	{
?>
		<form method="post" action="index.php">

			<label for="nom">test : <input type="text" name="nom" value="non" /></label>
			<input type="hidden" name="var" value="2" />
			<input type="submit" value="Envoyer" />
		</form>
<?php
	}
	else
	{
		echo "<div>Message envoyé !</div>";
	}
?>
</body>
</html>

Et accessoirement le CSS afin de rendre cela présentable.
C'est fait à la va-vite et ça fonctionne !

* {
		margin				: 0;
		border				: 0 none;
		padding				: 0;
}

body {
		background-color	: lightyellow;
}

form {
		display				: block;
		background-color	: lightpink;
		width				: 260px;
		padding				: 10px;
		margin				: 25px auto 0 auto;
		text-align			: center;
}

label {
		display				: block;
		background-color	: lightgreen;
		padding				: 10px;
		text-align			: right;
}

input[type="text"] {
		width				: 200px;
}

input[type="submit"] {
		background-color	: white;
		color				: black;
		border				: 2px solid red;
		border-radius		: 25px;
		margin-top			: 10px;
		width				: 100px;
		text-align			: center;
}

input[type="submit"]:hover {
		background-color	: black;
		color				: white;
		border				: 2px solid yellow;
}

div {
		background-color	: yellow;
		color				: red;
		border				: 2px solid red;
		width				: 200px;
		margin				: 100px auto 0 auto;
		text-align			: center;
}

Comment cela fonctionne ?

Un flip flop, c'est une bascule !

J'utilise une variation "var" pour faire le flip flop.
La première fois, la variable n'existe pas, alors je la crée et je l'initialise à "1".
D'où l'affichage du formulaire. Tu cliques ensuite sur le bouton "envoyer" sans rien changer !

Comme la variable existe, car elle est transmise par le <input type="hidden"> et en plus je l'ai initialisé à "2", je la teste afin de savoir si je poursuis ou pas.

Si nom est encore à "non", je boucle sur le formulaire.
Si nom est cette fois-ci à "oui", je n'affiche plus le formulaire et j'affiche un simple message.

A toi d'installer cela en test sur ton serveur web et d'essayer de comprendre comment cela fonctionne !

@+
Modifié par tournikoti (08 Oct 2013 - 19:51)
Merci pour ton aide,

mais je pense que tu fais fausse route !

J'ai un site en one page HTML5 en mode bootstrap.
Je me vois mal le mettre en php, pour juste un formulaire basique de contact !

J'ai déjà fait un formulaire comme ça par le passé, je sais que c'est faisable !
Juste que je me perd un peu dans la structure.

Donc pas d'index.php mais un index.html. !

Merci encore, c'est pas grave, je vais bien finir par trouver ! lol !
Bonsoir Kenzo082.

Mais comment vas-tu gérer ton formulaire si tu ne le traites pas du coté serveur ?
Et pourtant dans l'exemple que tu donnes, tu utilises le fichier process.php ?
Et pire, au départ, tu voulais faire de l'AJAX qui, si je ne m'abuse est bien plus compliqué que ce bout de code.

Pour envoyer des messages, il faut paramétrer le serveur mail que tu vas utiliser.
Voici un exemple qui fonctionne correctement chez moi !

<!DOCTYPE html>
<html lang="fr">
<head>
<!-- ================ -->
<!-- les balises Meta -->
<!-- ================ -->

<meta charset="ISO-8859-15" />

<title>On test la fonction mail()</title>

<!-- ====================== -->
<!-- Cascading Style Sheets -->
<!-- ====================== -->

<link rel="stylesheet" type="text/css" href="Styles.css" />

</head>

<body>
<!-- ================================= -->
<!-- Paramétrage de la fonction mail() -->
<!-- ================================= -->

<?php
ini_set("SMTP", "smtp.neuf.fr");
ini_set("smtp_port", 25);
ini_set("sendmail_from", "Tournikoti <tournikoti@gmail.com>");
ini_set("auth_username", "tournikoti@gmail.com");
ini_set("auth_password", "blablabla");

$to       = 'Kenzo082 <kenzo082@gmail.com>';
$subject  = 'Test de l\'envoi d\'un message !';
$message  = 'Voici un message envoyé depuis un script HTML/PHP !';
$headers  = 'MIME-Version: 1.0' . "\n";
$headers .= 'X-Mailer: PHP/' . phpversion() . "\n";
?>

<h1>Envoi d'un message vers l'adresse E-MAIL : <?php echo $to ?></h1>

<!-- ---------------------------- -->
<!-- On test l'envoi d'un message -->
<!-- ---------------------------- -->

<?php
$envoi = mail($to, $subject, $message, $headers);

if ($envoi == true)		echo "<br /><h1>L'email a été envoyé avec succès.</h1>";
else					echo "<br /><h1>&eacute;chec de l'envoi d'un email</h1>";
?>

</body>
</html>

Tu changes ces trois déclaratives suivantes :
ini_set("sendmail_from", "Tournikoti <tournikoti@gmail.com>");
ini_set("auth_username", "tournikoti@gmail.com");
ini_set("auth_password", "blablabla");
afin de mettre l'adresse email de l'expéditeur et du destinataire ainsi que le mot de passe du serveur de messagerie où tu vas faire transiter tes messages.

@+
Merci pour vos explications !
Je suis reparti de zéro, et ça a fonctionné.
Certainement une erreur de syntaxe.
Merci, problème réglé.
beyriem a écrit :
Tiens, Artemus est de retour Smiley murf


Artemus, le seul mec au monde qui fout des commentaires pour du code PHP dans la partie HTML. Smiley lol
Sujet clos
Aller à