IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

Envoi formulaire via AJAX


Sujet :

jQuery

  1. #1
    Membre habitué
    Homme Profil pro
    Développeur Web
    Inscrit en
    Avril 2012
    Messages
    142
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Avril 2012
    Messages : 142
    Points : 125
    Points
    125
    Par défaut Envoi formulaire via AJAX
    Bonjour à tous les amis !

    J'ai un petit problème, je souhaite traiter mon formulaire via un script ajax tout fonctionne sauf qu'il faut que j'appuie deux ou trois fois sur valider pour qu'il m'envoi mon formulaire !

    Je ne comprends pas. Voici mon code :

    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
     
    <script type="text/javascript">
    	$(function(){
    		$("#contact").submit(function(event){
    			var nom        = $("#name").val();
    			var tel      = $("#tel").val();
    			var sujet      = $("#subject").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(tel == '')
    			{
    				$('#msg_tel').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
    			{
    				$("form.contact").submit(function() {   
    					s = $(this).serialize(); 
    					$.ajax({ 
    						type: "POST", 
    						data: s,
    						url: $(this).attr("action"), 
    						success: function(retour){ 
    							$('#contact').html('<p>Formulaire bien envoyé</p>'); 
    						} 
    					}); 
    					return false; 
    				});
                }
                return false;
            });
        });
    </script>
    Et le 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
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
     
    <form method="post" id="contact" class="contact" action="process.php">
    	<div>
    		<div class="row">
    			<div class="4u">
    				<input type="text" name="name" id="name" placeholder="Nom / Société" />
    				<span id="msg_nom"></span>
    			</div>
    			<div class="4u">
    				<input type="tel" name="tel" id="tel" placeholder="Téléphone" />
    				<span id="msg_tel"></span>
    			</div>
    			<div class="4u">
    				<input type="email" name="email" id="email" placeholder="Email" />
    				<span id="msg_email"></span>
    			</div>
    		</div>
    		<div class="row">
    			<div class="12u">
    				<input type="text" name="subject" id="subject" placeholder="Sujet" />
    				 <span id="msg_sujet"></span>
    			</div>
    		</div>
    		<div class="row">
    			<div class="12u">
    				<textarea name="message" id="message"  placeholder="Message"></textarea>
    				<span id="msg_message"></span>
    			</div>
    		</div>
    		<div class="row double">
    			<div class="12u">
    				<ul class="actions">
    					<li><input type="submit" namevalue="Envoyer Message" /></li>
    					<li><input type="reset" value="Reset Formulaire" class="alt" /></li>
    				</ul>
    				<span id="msg_all"></span> 
    			</div>
    		</div>
    	</div>
    </form>

    Merci de votre aide. =)

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 075
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 075
    Points : 44 679
    Points
    44 679
    Par défaut
    Bonjour,
    pourquoi redéfinir l'action sur le submit dans ton dernier else $("form.contact").submit(function() {?

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Envoi formulaire via email en javascript
    Par jonat190 dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 23/08/2010, 11h10
  2. Réponses: 1
    Dernier message: 20/05/2010, 13h28
  3. envoi formulaire via une fonction
    Par legide dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 06/05/2009, 23h31
  4. [AJAX] Traitement d'un envoie de formulaire via Ajax ?
    Par dark_vidor dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 10/02/2009, 19h19
  5. [AJAX] comment envoyer un formulaire via AJAX
    Par Emcy dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 20/11/2008, 16h18

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo