Valid = true mais le form s'en fou....

Default
,

Bonjour à toutes et à tous

Voila je rencontre un petit problème avec mon code.

<?php session_start();?>
<html>
<head>


    <title>test</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>



</head>


<body bgcolor="#F7F7F7" >



<form method="post" action="../placer-une-annonce-gratuitement/depot_annonce--" enctype="multipart/form-data">                                              
Email :
<br/>               
<input type="text" name="champ_mail_pro_avec_compte" id="champ_mail_pro_avec_compte" />
<br/>
<br/>
Mot de passe :                                                                                                                          
<br/>
<input type="password" name="champ_pwd_pro_avec_compte" id="champ_pwd_pro_avec_compte"  />
<br/>
<br/>
<input type="submit" id="submit_pro_avec_compte" name ="submit_pro_avec_compte" value="valider"     />  
</form> 



<div id="AffLoad" name="AffLoad" class="AffLoad" style="display: none;">
    Envoi en cours...
</div>
<div id="erreur_email_du_pro_nexiste_pas" name="erreur_email_du_pro_nexiste_pas" class="AffLoadCroix" style="display: none;" >
    Heum ! &nbsp; il faut modifier une information...
</div>  




<script type="text/javascript">


    $("#submit_pro_avec_compte").click(function(){



                var valid = false;
                var log = $('#champ_mail_pro_avec_compte').val();
                var pass = $('#champ_pwd_pro_avec_compte').val();

                $.ajax({



                    type:"post",
                    url:"https://www.bondeal.quebec/Bondeal/check_compte--",
                    data: {log:log, pass:pass}, 


                    success:function(data){


                            if(data == 1){


                            valid = true;
                            alert (valid);

                            }else{

                            valid = false;
                            alert (valid);

                            }                                                                                                                                                                                                                                                                                                                                  
                    }
                });  

    return valid; 
    });


</script>   
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>                
</body>
</html>

Cas non passant : la page qui interroge la base retourne 0 -> une fenetre s'ouvre, (valid affiche "false") -> la personne n'est pas redirigé vers la page suivante OK

Cas passant (celui qui me pose problème): la page qui interroge la base retourne 1 -> une fenetre s'ouvre,(valid affiche "true") -> et pourtant la personne n'est toujours pas redirigé vers la page suivante .... le test est KO mais je ne comprends pas si valid retourne "true", pourquoi l'envois du formulaire ne se fait pas ????

merci pour votre aide je désespère

6 Réponse

53392
,

Salut,
Javascript est asyncrone, donc la ligne return valid est executé avant la fonction success.
donc, valid est toujours égale à false.

@plus

Pierre

Default
,

il suffitde du ternaire un truc du genre valide = (data === 1) ? true : false;

53392
,

bah, nan :D
a+
Pierre

17162
,

Bonjour.
Il va surtout falloir m'expliquer l'intérêt qu'ils ont de charger plusieurs versions d'une même librairie sur une même page.
Surtout que lui ce n'est même pas deux versions, mais 4.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script><!-- 1 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script><!-- 2 -->
<!-- ... -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><!-- 3 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script><!-- 4 -->

Après ils s'étonnent d'avoir des problèmes avec leur JavaScript.

35773
,

Bonjour,

Effectivement, il faut déjà faire du ménage en supprimant les 3 appels de jQuery sur 4 qui ne servent à rien... il serait bien aussi de placer l'appel de ton script en aval de celui de jQuery.

Ensuite, si j'ai bien compris, tu valide ton formulaire en Ajax, puis tu redirige l'utilisateur... si ton formulaire est déjà validé une fois... quel est l'intérêt de le renvoyer à nouveau ?

Les requêtes ajax peuvent prendre du temps, 1 seconde voir plus... et comme cela a été dit dans un précédent commentaire, Javascript est asyncrone, ce qui signifie que plusieurs actions peuvent être executées plus ou moins en même temps... d'où le problème de comportement de ton formulaire.

Je te conseile plutôt de retourner FALSE plutôt que ta variable "valid", pour désactiver le comportement du formulaire quelqu'en soit le context, puis de rediriger l'utilisateur avec un "window.location.href = url" (par exemple) si c'est nécessaire.

53392
,

il peut retourner ce qu'il veux dans la fonction click, il sera toujours = false ;)
j'ai expliqué pourquoi au dessus.
je le redis, la ligne "return valid" est éxécutée avant la function succcess ;)
Donc, comme il commance sa function click par valid = false il retournera dans 1000% des cas false ;)

@plus

Pierre