AJAX现场检查可用性提交按钮 [英] AJAX live checking availability with submit button
问题描述
-
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
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现场检查可用性提交按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
