douhuilin1152
2014-12-14 08:35
浏览 67

验证表单,检查用户是否存在,注册它们。 全部使用Ajax

My javascript is inside an html file called register.html. The user submits the form. This should then trigger the $('input[name="createacc"]').click(function (e) AJAX then sends those 4 variables to checkuser.php. Checkuser.php should then check to see if the username exists. If it does exist, it should echo 0. If it does not exists, it should echo 1. Register.html then checks to see what checkuser.php echoed. If the echo was "0" then, then an alert box should appear saying username unavailable. If the echo was "1" or anything else, register.html should run $("#registerform").submit(); which then does the php script. This should all happen without leaving the register.html page.

I check chrome's built in debugger and I see that if the account exists checkuser.php writes back 0 and if the account doesn't it writes back 1. But for some reason nothing else happens. The account does not register nor do I get an alert box saying the username is unavailable

here is my register.html

<form ata-parsley-validate name="registerform" id="registerform" action="register.php" method="post">

                        <p>
                            <label for="firstname">First Name:</label>
                            <input name="firstname" id="firstname" maxlength="32" type="text" placeholder="Optional" />
                        </p>
                        <p>
                            <label for="username" id="usernameText">Username:</label>
                            <input data-parsley-pattern="^[A-Za-z0-9_]{3,15}$" data-parsley-length="[3, 15]" name="username" id="username" maxlength="32" type="text" data-parsley-error-message="Username needs to be between 3 and 15 characters. Case sensitive. No special characters allowed." required/>
                        </p>
                        <p>
                            <label for="password1">Password:</label>
                            <input name="password1" id="password1" data-parsley-pattern="^[A-Za-z0-9_-]{5,25}$" data-parsley-length="[5, 25]" type="password" data-parsley-equalto="#password2" data-parsley-error-message="Passwords must match. Needs to be between 5 and 25 characters. Case sensitive. No special characters allowed." required/>
                        </p>
                        <p>
                            <label for="password2">Confirm Your Password:</label>
                            <input name="password2" id="password2" data-parsley-length="[5, 25]" data-parsley-error-message="Passwords must match. Needs to be between 5 and 25 characters. Case sensitive. No special characters allowed." data-parsley-pattern="^[A-Za-z0-9_-]{5,25}$" type="password" data-parsley-equalto="#password1" required/>
                        </p>
                        <p>
                            <label for="email">E-Mail:</label>
                            <input data-parsley-trigger="change" name="email" id="email" maxlength="1024" type="email" required/>
                        </p>
                        <p>
                            <input type="submit" id="submit" class="submit" name="createacc" value="Register" />
                        </p>
                    </form>

Here is my javascript

<script>
    $(document).ready(function () {


    $('input[name="createacc"]').click(function (e) {
        var username = $('input[name="username"]').val();
        var firstname = $('input[name="firstname"]').val();
        var password1 = $('input[name="password1"]').val();
        var email = $('input[name="email"]').val();
        e.preventDefault();
       $.ajax({
            type: 'POST',
            data: {
                username: username,
                firstname: firstname,
                password1: password1,
                email: email
            },
            url: 'checkuser.php',
            success: function (data) { //Receives the data from the php code
                if (data === "0") {
                    alert("Username Unavailable");
                } else {
                   $("#registerform").submit();
                alert("Account successfuly created"); 
                }


            },
            error: function (xhr, err) {
                console.log("readyState: " + xhr.readyState + "
status: " + xhr.status);
                console.log("responseText: " + xhr.responseText);
            }
        });
    });

        });
</script>

Update - I have fixed parts of my code through the help of others below me. My only issue now is that $("#registerform").submit(); doesn't do anything

  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • duanqin9507 2014-12-14 08:52
    已采纳

    You are trying to return and JSON not setting

    header('Content-type: application/json');
    

    Decide whether you want to pass plaintext or json. Your string might be now "0", not 0

    Try

    if (data === '"0"') {
    
    已采纳该答案
    打赏 评论
  • douseda0009 2014-12-14 08:52

    I think the problem is in your success.you have written If it does exist, it should echo 0. If it does not exists, it should echo 1.you should use:

    success: function (data) { //Receives the data from the php code
                    if (data == '"0"') {       //register if user exists.          
                    $("#registerform").submit();
                    } else {
                          alert("Username Unavailable");
                    }
    
    打赏 评论

相关推荐 更多相似问题