2013-04-30 103 views
1

我有我的html頁面,用戶可以在其中註冊,這會調用我的php頁面進行檢查並輸入到db, 如果出現錯誤,例如某人不選擇他們的性別,它會提醒用戶,因爲它應該。問題是,如果用戶沒有選擇性別,並再次提交阿賈克斯現在被調用兩次,我得到兩個相同的警報消息,如果再做一次我得到三個警報消息,這contiunes成長在每一臺新聞等。我怎麼能停止這種情況。jquery-mobile ajax在每次失敗後都會運行一次

<!DOCTYPE HTML> 
<html> 
<head> 
     <meta charset="utf-8" /> 
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
     <meta name="apple-mobile-web-app-capable" content="yes" /> 
     <meta name="apple-mobile-web-app-status-bar-style" content="black" /> 
     <title> 
     </title> 
     <link rel="stylesheet" href="css/logout-button.min.css" /> 
     <link rel="stylesheet" href="css/jquery.mobile-1.3.0.min.css" /> 
     <link rel="stylesheet" href="css/my.css" /> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
     </script> 
     <script src="js/jquery.mobile-1.3.0.min.js"></script> 
     <script src="js/jquery.cookies.2.2.0.min.js"></script> 
     <script src="js/account-login.js"></script> 

</head> 
    <body> 
     <!-- Home --> 
     <div data-role="page" id="account-signup"> 
     <script> 
       function submitForm() { 
        $(document).ready(function() { 
         $("form#signupForm").submit(function() { 
          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; 
        }); 
       }); 
       } 
      </script> 
      <div data-theme="a" data-role="header"> 
       <a data-role="button" href="account-login.html" data-transition="slide" 
       data-icon="arrow-l" data-iconpos="left" class="ui-btn-left"> 
        Back 
       </a> 
       <h3> 
        Sign-Up 
       </h3> 
      </div> 
      <div data-role="content"> 
       <form id="signupForm" name="signupForm"> 
       <input name="method" id="method" placeholder="method" value="account-signup" type="hidden" /> 
        <div data-role="fieldcontain"> 
         <fieldset data-role="controlgroup"> 
          <label for="forename"> 
           Forename * 
          </label> 
          <input name="forename" id="forename" placeholder="Forename" value="" type="text" /> 
         </fieldset> 
        </div> 
        <div data-role="fieldcontain"> 
         <fieldset data-role="controlgroup"> 
          <label for="surname"> 
           Surname * 
          </label> 
          <input name="surname" id="surname" placeholder="Surname" value="" type="text" /> 
         </fieldset> 
        </div> 

        <div data-role="fieldcontain"> 
        <label for="gender">Gender</label> 
        <select name="gender" id="gender" data-native-menu="false"> 
        <option>Gender</option> 
        <option value="male">Male</option> 
        <option value="female">Female</option> 
        </select> 
        </div> 
        <div data-role="fieldcontain"> 
         <script type="text/javascript"> 

           $(function(){ 
            var items=""; 
            $.getJSON("ajaxResponder.php?method=account-signup-countries",function(data){ 
            items+='<option value="Select Country">Select Country</option>'; 
            $.each(data,function(index,item) 
            { 
            items+="<option value='"+item.id+"'>"+item.name+"</option>"; 
            }); 
            $("#countries").html(items); 
            $("#countries").trigger("change"); 
            }); 
           }); 

         </script> 
         <legend>Country *</legend> 
         <select name="countries" id="countries" data-native-menu="false"> 
         </select> 
        </div> 
        <div data-role="fieldcontain"> 
         <fieldset data-role="controlgroup"> 
          <label for="email"> 
           Email * 
          </label> 
          <input name="email" id="email" placeholder="Email" value="" type="text" /> 
         </fieldset> 
        </div> 
        <div data-role="fieldcontain"> 
         <fieldset data-role="controlgroup"> 
          <label for="password"> 
           Password * 
          </label> 
          <input name="password" id="password" placeholder="Password" value="" type="password" /> 
          <label for="confirm"> 
           Confirm Password * 
          </label> 
          <input name="confirm" id="confirm" placeholder="Confirm" value="" type="password" /> 
         </fieldset> 
        </div> 
        <input data-theme="b" value="Sign-Up" type="submit" onclick="submitForm()" /> 
       </form> 
      </div> 
     </div> 
    </body> 
</html> 

我的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; 

回答

2

你在你的JavaScript錯誤,調用函數時,你不需要這些行:

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

首先你不需要的文件準備好了,因爲你並沒有等待那個狀態。第二件事,如果您使用onclick = ...使用內聯hjavascript,您不需要將提交事件綁定到表單。

基本上每次你再次打電話時,你都會綁定提交事件給表單。

第三件事情,如果驗證是在客戶端執行的,那麼不會發生這種情況,所以考慮一下。您可以輕鬆實現jQuery Validate插件。

我給你的建議是,從該行刪除onclick事件:

<input data-theme="b" value="Sign-Up" type="submit" onclick="submitForm()" /> 

,請刪除onclick功能,只需使用一切是這樣的:因爲提交事件的

$(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; 
    }); 
}); 

此代碼將觸發當你按下提交按鈕時,不需要onclick。並注意現在如何處理提交:

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

這將防止發生多個提交事件。

+1

瞭解Gajotres,謝謝你的詳細答案芽,是的它的工作;) – 2013-04-30 21:07:01