AJAX现场检查可用性提交按钮

本文介绍了AJAX现场检查可用性提交按钮的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

test1.php

test1.php

<html>
<head>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
       $('#username').change(function(){
            var userName = $('#username').val();

            $.post("getUserName.php", {userName: userName}, function(data){
                $("#userNameCheck").html(data);
            });
       });

       $('#submit').click(function(){
            //CODE HERE

       });
    });
</script>
</head>

<body>
<form action="" method="post" id="addform">
    Username: <input type="text" name="username" id="username" size="24" class="required" maxlength="22" />
    <div id="userNameCheck"></div>
    <input type="submit" id="submit" name="submit" value="ADD user" />
</form>
</body>
</html>

getUserName.php

<?php
include("db.php");

$userName = $_POST['userName'];
$q = "select user_name from user where user_name = '".$userName."'";
$r = mysqli_query($dbc, $q);

$num =  mysqli_num_rows($r);

if($num)
{
      echo '<div style="color:red">Username taken. Please type another new one.
     </div>';
}
else
{
      echo '<div style="color:green">You can use it.</div>';
}
?>

数据库（用户表）

USER_ID＆NBSP;＆NBSP;＆NBSP;＆NBSP;用户名
1＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP; ＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;阿里
2＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP; ＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;阿布

database (user table)

user_id      user_name
1                      ali
2                     abu

从上面的：
=>输入阿里的文本框 - >节目你可以用它消息话题的绿色
。=>键入艾哈迈德的文本框 - >显示用户名取......在红色的消息

From the above:
=> type "ali" on textbox -> show "You can use it" messsage in green color.
=> type ahmad on textbox -> show "Username taken..." message in red color.

我的要求是，如果消息是：你可以用它，去test2.php;如果消息是用户名取......，没有提交表单上。

My requirement is if the message is "You can use it", go to test2.php; if the message is "Username taken...", no submission on the form.

我的问题是我怎么控制你可以用它或用户名取的消息时，我点击提交按钮？

My question is how do I control the "You can use it" or "Username taken" message when I click the submit button?

推荐答案

而不是使用一个点击处理程序按钮，请使用表格提交的事件。

Instead of using a click handler for the button, use the form submit event.

$(document).ready(function () {
    $('#username').change(function () {
        var userName = $('#username').val();

        $.post("getUserName.php", {
            userName: userName
        }, function (data) {
            $("#userNameCheck").html(data);
        });
    });

    $('#addform').submit(function () {
        //if the text is `You can use it` allow the form submit else block it
        return $("#userNameCheck").html().trim() == 'You can use it';
    });
});

另外，还要确保你做同样的验证在 test2.php ，因为在客户端验证即可侧台阶。

Also make sure that you do the same validation in test2.php because, the client side validation can be side stepped.

这篇关于AJAX现场检查可用性提交按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！