Envoi de formulaire sans recharger la page

Version imprimable

14/09/2014, 12h23
argon

Envoi de formulaire sans recharger la page

Bonjour

J'ai réalisé mon site avec ces tutos

http://www.youtube.com/watch?v=qfUEFQexkAQ
http://www.youtube.com/watch?v=JbUDv9VHK68

Mon problème, est quand je valide un formulaire, le site se recharge sur la page d'accueil sans que le script JavaScript n'est pu être traité.

Là c'est un formulaire de contact.

Y a t'il un moyen de valider un formulaire sans que le site se recharge?

A bientôt
15/09/2014, 09h08
SpaceFrog

les tutos en eux même ne nous intéressent pas ...
il serait beaucoup plus intéressant de voir ton code !
Au vu des symptômes, je pense qu'il manque un .preventDefault();

Bonjour

Voici le code

Voici le code du formulaire:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div id="success"></div>
 
		<form id="envoimess" action="contact.php" method="post">
 
			<label for="nom">Nom:</label>
            <span class="erreur"></span>
			<input type="text" name="nom" id="nom"/>
 
            <label for="email">Email:</label>
            <span class="erreur"></span>
			<input type="text" name="email" id="email"/>
 
            <label for="message">Votre message:</label>
            <span class="erreur"></span>
            <textarea name="message" id="message"></textarea>
 
            <input type="button" name="submit" id="submit" class="submit" value="envoyer">
 
      </form>
 
      <div id="load"></div>

Voici le script:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
$(document).ready(function() {
 
		$('#success').hide();
		 $('#load').hide();
 
		$('#envoimess').submit(function(){
 
			valid =true;
 
			if($('#nom').val()==''){
        $('#nom').prev('.error').fadeIn(1000).text('Indiquez votre nom');
        valid = false;
      }
      else{
        $('#nom').prev('.error').slideUp();
      }
 
		 if(!$('#email').val().match(/^[a-z0-9._-]+@[a-z0-9.-]{2,}[.][a-z]{2,3}$/)){
        $('#email').prev('.error').fadeIn(1000).text('Email invalide');
        valid = false;
      }
 
      else{
        $('#email').prev('.error').slideUp()
      }
 
			if($('#message').val()==''){
        $('#message').prev('.error').fadeIn(1000).text('Indiquez votre message');
        valid = false;
      }
      else{
        $('#message').prev('.error').slideUp();
      }
 
			 if(valid==true)
      {
        var nom = $('#nom').val();
        var email = $('#email').val();
        var message = $('#message').val();
        var dataString = 'nom='+nom+'&email='+email+'&message='+message;
 
        $.ajax({
          type: 'POST',
          url: 'contact.php',
          data: dataString,
 
          beforeSend: function()
          {
            $('#load').fadeIn();
          },
 
          success: function()
          {
            $('#load').fadeOut();
            $('#form').slideUp();
            $('#success').slideDown();
            $('#success').text('Formulaire OK');
          }
        });
      }
 
			return false;
 
		});
});

A +

15/09/2014, 16h23
darkterreur

Bonjour,

essaye de rajouter à ton bouton ceci pour voir.

Code:

onclick="return false;"
18/09/2014, 08h19
argon

Bonjour

Le .preventDefault(); bloc le fonctionnement du script et le onclick="return false;" ne fait rien.

Je pense que c'est la navigation qui pose problème

A +
18/09/2014, 11h53
darkterreur
Bonjour la seul idée que j'ai la tout de suite c'est d'essayer

1 avec une fonction tout simple tel que
Code:

1 2 3 function test(){ console.log('je passe'); }
2 essaye avec avec un truc comme cela pour voir

Code:

<div onclick="test();return false;">valid</div>

La tout de suite c'est tout ce qui me viens.
19/09/2014, 05h36
argon

Bonjour

darkterreur ca ne fonctionne pas.

Je pense que je me suis mal expliqué!!!!

Lorsque je valide, je vais directement sur la page php, sans passer par les script, vue que c'est la page contact.php qui répond.

Je pense que mon souci vient de là.

A+
19/09/2014, 08h45
Bovino

Je ne vois pas à quel moment le formulaire est soumis puisque tu n'as pas d'input de type submit.
Du coup, je suppose que tu le soumets par script, ce qui est ballot parce que dans ce cas, l'événement submit n'est pas déclenché ! :aie:
19/09/2014, 11h17
darkterreur

En effet,
Et dans ce cas la tu va forcément recharger la page.
Et ton script JS ne sera pas traiter. Je ne suis pas sur que l'on puisse cumuler un "submit" avec un onclick, il dois y avoir des problèmes d'exécution.

Je te conseillerai plutôt de faire un input standard, ou une div, ou un truc qui te sert de button, qui appel une fonction JS.
Qui fait un sérialize de ton formulaire et l'envoi en js a ton fichier php.

Bonjour

J'ai essayé de retourner en arrière.

Et testé une alert, et ca ne fonctionne pas

Je pense que le script ne reçois pas le submit

Code javascript

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
$(document).ready(function() {
 
 
		$('#success').hide();
		 $('#load').hide();
 
		$('#envoimess').on('submit', function(e) {
 
			  e.preventDefault();
 
			 var $this = $(this); 
 
			alert("teste submit")
 
 
		});
});

Code formulaire html

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
<form id="envoimess" action="contact.php" method="POST">
 
			<label for="nom">Nom:</label>
            <span class="erreur"></span>
			<input type="text" name="nom" id="nom"/>
 
            <label for="email">Email:</label>
            <span class="erreur"></span>
			<input type="text" name="email" id="email"/>
 
            <label for="message">Votre message:</label>
            <span class="erreur"></span>
            <textarea name="message" id="message"></textarea>
 
            <input type="submit" name="submit" id="submit" value="envoyer">
 
      </form>

Peut être que j'ai mal installé jquery, le voici:

Code:

1
2
 
<script src="jquery/jquery-2.1.1.min.js" type="text/javascript"></script>

Là, je ne sais plus quoi pensé!

A +

Bonjour,
le simple code que tu as mis devrait fonctionner donc effectivement un problème de chargement de la bibliothèque peut être à l'origine de ton soucis

exemple pour test sur base de ton code.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>[...]</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function () {
  $('#success').hide();
  $('#load').hide();
  $('#envoimess').on('submit', function (e) {
    e.preventDefault();
    var $this = $(this);
    alert("teste submit")
  });
});
</script>
</head>
<body>
<form id="envoimess" action="contact.php" method="POST">
    <label for="nom">Nom:</label>
    <span class="erreur"></span>
    <input type="text" name="nom" id="nom"/>
    <label for="email">Email:</label>
    <span class="erreur"></span>
    <input type="text" name="email" id="email"/>
    <label for="message">Votre message:</label>
    <span class="erreur"></span>
    <textarea name="message" id="message"></textarea>
    <input type="submit" name="submit" id="submit" value="envoyer">
</form>
</body>
</html>

21/09/2014, 18h26
ABCIWEB

Salut,

Alors as-tu réussi à faire fonctionner l'exemple de NoSmoking ?

Bah sinon, les tutos vidéos cela peut être bien pour se donner une idée rapide mais quand il s'agit de coder rien ne vaut des tutos écrits qui proposent des bouts de code que tu pourras tester avec un simple copié/collé... et c'est pas les tutos qui manquent par exemple ici ou quand tu rentre "ajax jquery tuto" dans un moteur de recherche.
22/09/2014, 05h27
argon

Bonjour

Ca ne fonctionne pas, je pense que le problème vient de l'organisation de mes fichiers.

J'essaie de découper le site en plusieurs fichiers pour que ce soit plus propre.

Voilà un schéma de comment je me suis organisé.

http://nsa33.casimages.com/img/2014/...1941734604.jpg

Pourriez-vous me dire si le problème vient de là

A +