Discussion :

[argon]

Bonjour

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

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

[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();

[argon]

Bonjour

Voici le code

Voici le code du formulaire:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 +

[darkterreur]

Bonjour,

essaye de rajouter à ton bouton ceci pour voir.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 onclick="return false;"

[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 +

[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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
function test(){
console.log('je passe');
}

2 essaye avec avec un truc comme cela pour voir

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

La tout de suite c'est tout ce qui me viens.

[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+

[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é !

[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.

[argon]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Là, je ne sais plus quoi pensé!


A +

[NoSmoking]

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

[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.

[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é.



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

A +