<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>
<?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 user_name 1 ali 2 abu
从上面开始: => 在文本框中键入“ ali ”->显示绿色消息“您可以使用它”。 => 在文本框中键入 ahmad- >以红色显示“ Username included …”消息。
我的要求是,如果消息是“您可以使用它”,请转到test2.php;如果消息是“用户名已使用…”,则表单上没有提交。
我的问题是,当我单击“提交”按钮时,如何控制“您可以使用它”或“获取用户名”消息?
不要使用按钮的单击处理程序,而要使用表单提交事件。
$(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因为客户端验证可以分步进行。
test2.php