jquery-mobile ajax runs one more time after every failed pass

Question

I have my html page where people can sign up, which calls my php page for checks and inputs to db, If i get an error, for example someone does not select their gender it alerts the user as it should. Problem is if the user does not select there gender and submits again the ajax is called twice now and i get two of the same alert messages, If done once more i get three alert messages and this contiunes growing on every press etc. How can i stop this happening.




      
        
        
        
        
        
        
        
        
        
        
        
        
        


     
        
        
        
            
                
                    Back
                
                
                   Sign-Up
                
            
            
                
                
                    
                        
                            
                                Forename *
                            
                            
                        
                    
                    
                        
                            
                                Surname *
                            
                            
                        
                    

                    
                    Gender
                    
                    
                    
                        
                        Country *
                        
                    
                    
                        
                            
                                Email *
                            
                            
                        
                    
                    
                        
                            
                                Password *
                            
                            
                            
                                Confirm Password *

my php

 case 'account-signup':
    $password_minlength = 6;
    $password_maxlength = 40;

    $message == "";

function validusername($username) {
        $allowedchars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ¥µÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖØÙÚÛÜÝßàáâãäåæçèéêëìíîïðñòóôõöøùúûüýÿ'";
        for ($i = 0; $i < strlen($username); ++$i)
            if (strpos($allowedchars, $username[$i]) === false)
            return false;
        return true;
}
    $forename= $_POST["forename"];
    $surname= $_POST["surname"];
    $email= $_POST["email"];
    $password= $_POST["password"];
    $confirm= $_POST["confirm"];
    $day = $_POST["select-choice-day"];
    $month = $_POST["select-choice-month"];
    $year = $_POST["select-choice-year"];
    $country = $_POST["countries"];
    $gender = $_POST["gender"];

  if ($day =='Day' or $month == 'Mon' or $year =='Year')
    $message = "You Need to fill in Your DOB";
  if ($gender =='Gender')
    $message ="Please select your Gender";
  if ($country == "Select Country")
    $message ="Please select a Country";

  if (empty($password) || empty($forename) || empty($surname) || empty($email) || empty($confirm)  )
    $message = "All fields required to be filled in";

  elseif ($password != $confirm)
    $message = "Your passwords do not match";
  elseif (strlen($password) < $password_minlength)
    $message = sprintf("Your password needs to be more than $password_minlength char");
  elseif (strlen($password) > $password_maxlength)
    $message = sprintf("Your password needs to be less than $password_maxlength char");
  elseif (!validusername($forename))
    $message = "Invalid characters used in your forename";
    elseif (!validusername($surname))
    $message = "Invalid characters used in your surname";
  elseif (!validemail($email))
        $message = "A Valid email address is required";

    if ($message == "") {
          // check if email addy is already in use
          $a = (@mysql_fetch_row(@SQL_Query_exec("select count(*) from users where email='$email'")));
          if ($a[0] != 0) 
            $message = "Email Address $email has already signed up. Please use account-recovery ";          
        }
  if ($message == "") {
    $signupclass = '1';
    $status = "confirmed";
    $dob = "$year-$month-$day";
    $secret = mksecret(); //generate secret field
    $password = passhash($password);// hash the password
    $forename1 = str_replace('\' ', '\'', ucwords(str_replace('\'', '\' ', strtolower($forename))));
    $surname1 = str_replace('\' ', '\'', ucwords(str_replace('\'', '\' ', strtolower($surname))));
    SQL_Query_exec("INSERT INTO users (forename,surname, password, secret, email, status, added, last_access, country, gender,dob, stylesheet, language, class, ip) VALUES (" .
      implode(",", array_map("sqlesc", array($forename1,$surname1, $password, $secret, $email, $status, get_date_time(), get_date_time(), $country, $gender,$dob, $site_config["default_theme"], $site_config["default_language"], $signupclass, getip()))).")");
      $message="yes";
  }
echo "$message";
  break;

Gajotres · Accepted Answer

You have an error in your javascript, when calling function, you don't need these lines:

$(document).ready(function() {
    $("form#signupForm").submit(function() {

First of all you dont need document ready because you are not waiting for that state. Second thing, if you are using inline hjavascript with onclick=... you dont need to bind a submit event to the form.

Basically each time you call in again you are binding submit event to the form.

Third thing, this would not happen if validation was implemented on a client side, so think about that. You can easily implement jQuery Validate plugin.

My advice to you would be, remove onclick event from this line:

Remove onclick function and just use everything like this:

$(document).ready(function() {
    $('#signupForm').off('submit').on('submit',function(e) {
        var form_data = $('#signupForm').serialize();
        $.ajax({
            type: "POST",
            url: "ajaxResponder.php",
            dataType: 'html',
            data: form_data,
            complete: function(data){
                if(data.responseText == 'yes'){
                    alert("Your Account has been created");
                    $.mobile.changePage( "account-login.html", { transition: "slide"} );
                }else {
                    alert(data.responseText);
                }
            }
        });
        return false;
    });
});

Because of submit event this code will trigger when you press submit button, no need for onclick. And notice how submit is handled now:

$('#signupForm').off('submit').on('submit',function(e) {

This will prevent multiple submit events from happening.

jquery-mobile ajax runs one more time after every failed pass

Answers (1)

Related Questions