每次失败的传球后,jquery-mobile ajax再运行一次

时间:2013-04-30 20:36:35

标签: php jquery jquery-mobile jquery-validate

我有我的html页面,人们可以注册,它调用我的php页面检查和输入db, 如果我收到错误,例如某人没有选择他们的性别,则会提醒用户。问题是,如果用户没有选择性别并再次提交,则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;

1 个答案:

答案 0 :(得分:2)

你的javascript中有错误,在调用函数时,你不需要这些行:

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

首先,你不需要准备好文件,因为你不是在等待这种状态。第二件事,如果你使用内联hjavascript和onclick = ...你不需要将提交事件绑定到表单。

基本上每次再次打电话时,都会将提交事件绑定到表单。

第三件事,如果在客户端实施验证,则不会发生这种情况,所以请考虑一下。您可以轻松实施 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) {

这将阻止多个提交事件发生。