Bonjour je ne savais pas où poster le sujet j'espere que c'est l'endroit le mieux adapter.

Je galère avec AJAX. J'essaye de rafraichir un formulaire sans que la page ne se recharge en entier.

Après plusieurs recherche j'ai trouvé un tuto et plein de posts traitant de ce sujet mais je n'arrive toujours pas à résoudre mon problème.

Le traitement du formulaire s'effectue bien mais la page se recharge toujours en entier. Si quelqu'un saurait m'apporter son aide ce serait super :) 

Mon index sur lequel j'ai include le formulaire et sur lequel mon script est actif :

        <section class="section4">
            <div class="container">
                <h3>Pourquoi me contacter ?</h3>
                <p>BLA BLA BLA</p>
                <p>BLA BLA BLA</p>
                <p>BLA BLA BLA</p>
                <p>BLA BLA BLA</p>

                <?php include'contact.php' ; ?> 
            </div>
        </section> 


        
        
        <script>
            
            $('#competence').click(function(){
            $('#competencecontenu').slideToggle();
            $('#profilcontenu').hide();
            $('#projetscontenu').hide();
             });
            
            $('#profil').click(function(){
            $('#profilcontenu').slideToggle();
            $('#competencecontenu').hide();
            $('#projetscontenu').hide();
             });
            
            $('#projets').click(function(){
            $('#projetscontenu').slideToggle();
            $('#profilcontenu').hide();
            $('#competencecontenu').hide();
             });

            $('.masquer').click(function(){
            $('#competencecontenu').hide();
            $('#profilcontenu').hide();
            $('#projetscontenu').hide();
             });
            
            
            
            $(document).ready(function(){

    $("#submit-contact").click(function(){

        $.post(
            'requete.php', 
            {
                auteur : $("#auteur").val(), 
                mail : $("#mail").val(),
                object : $("#object").val(),
                message : $("#message").val(),
                contact : $("#contact").val()
            },

            function(data){

                if(data == 'bloup'){
              

                     $("#resultat").html("<p>1</p>");
                }
                else{
     

                     $("#resultat").html("<p>2</p>");
                }
        
            },

         );

    });

});
        
        </script>

mon traitement php :

<?php

$db = **********


if (isset($_POST['contact'])){

	     if (!empty($_POST['auteur']) and !empty($_POST['mail']) and !empty($_POST['object']) and !empty($_POST['message'])) {     
        $contact = $db -> prepare('INSERT INTO message (auteur,mail,objet,message) VALUES (?,?,?,?) ');
        $contact -> execute(array($_POST['auteur'],$_POST['mail'],$_POST['object'],$_POST['message']));
     
			} else
    if (empty($_POST['auteur'])){
        $auteur = "J'ai besoin de savoir qui vous êtes" ;}
        if (empty($_POST['object'])){
            $object = "J'ai besoin de savoir pourquoi vous essayez de me contacter !" ;}
            if (empty($_POST['mail'])){
                $mail = "J'ai besoin de connaitre votre adresse pour vous répondre" ;}
                if (empty($_POST['message'])){  
                $message = "Vous essayez d'envoyer un message vide !" ;  echo 'bloup' ; }
               

}

?>

mon formulaire : 

<style>
	

#contact-form
{
	font-size: 20px;
	background: white;
	padding: 40px;
	border-radius: 10px;
}

.blue
{
	color: blue;
}


.comments
{
	font-style: italic;
	font-size: 18px;
	color: #d82c2e;
	height: 25px;
}

#requis
{
	font-weight: bold;
}

#contact-form input[type=submit]
{
	margin: 40px auto 0px;
	display: block;
}
.button1
{
	border: 1px solid #ddd;
	border-radius: 50px;
	background: #150D0D;
	color: white;
	width: 100%;
	font-weight: bold;
	text-transform: uppercase;
	padding: 18px;
	border-radius: 5px;
	transition: all 0.3s ease-in 0s;
}

.button1:hover
{
	background: #06461E;
	border-color: #06461E;
}

.thank-you
{
	text-align: center;
	margin-top: 15px;
	font-weight: bold;
	font-size: 22px;
}

.contact
{
	color : black;
	margin-top : 30px;
}

	</style>

	<div id="resultat"></div>
		
	<div class="container contact" id="contact">
		<div class="row">	
			<div class="col-md-10 col-md-offset-1" style="float: none; margin: 0 auto;">
				
				<form id="contact-form">

					<div class="row">
						<div class="col-md-6">
							<label for="auteur">Nom<span class="blue"> *</span></label>
							<input type="text" name="auteur" id="auteur" class="form-control" placeholder="votre nom" >
							<p class="comments"><?php echo $auteur ; ?></p>
						</div> 
						<div class="col-md-6">
						<label for="name">Objet<span class="blue"> *</span></label>
							<input type="text" name="object" id="object" class="form-control" placeholder="Pourquoi m'ecrivez-vous ?" >
							<p class="comments"></p>
						</div>
						
						<div class="col-md-10">
							<label for="email">Email<span class="blue"> *</span></label>
							<input type="text" name="mail" id="mail" cols="15" rows="20" class="form-control" placeholder="votre adresse email" >
							<p class="comments"></p>
						</div> 
						
						<div class="col-md-12">
							<label for="message">Message<span class="blue"> *</span></label>
							<textarea id="message" name="message" class="form-control" placeholder="Votre message" rows="4" ></textarea>
							<p class="comments"></p>
						</div>

						<div class="col-md-12">
							<p class="blue" id="requis">* Ces informations sont requises</p>
						</div>

						<div class="col-md-12">
							<input type="submit" name="contact" id="submit-contact" class="button1" value="envoyer">
						</div>
					</div>
				</form>
			</div>
		</div>
</div>

Merci beaucoup !

Que dit-il de :

$("#submit-contact").click(function (event) {
   event.preventDefault()

   ...

..?

-
Edité par Anonyme 7 décembre 2017 à 20:59:16