我正在编写一个Wordpress PHP表单,用于创建带有提交的数据库条目。我想动态检查用户已输入表单的电子邮件地址是否已存在于数据库中。
目前,检查是在提交表单时进行的,但是我想在用户选中电子邮件字段后动态发生,我不知道如何完成此操作。我假设我需要使用AJAX或类似的东西。
以下是我的表单页面中的代码:
<form action="<?php echo get_template_directory_uri(); ?>/inc/form.php" method="post">
<label for="first_name">First Name: <span>(required)</span></label>
<input type="text" name="first_name" />
<label for="last_name">Last Name: <span>(required)</span></label>
<input type="text" name="last_name" />
<label for="email">Email: <span>(required)</span></label>
<input type="text" name="email">
<input type="submit">
</form>
以下是我的form.php文件中检查重复条目的部分代码:
$dupQuery = $wpdb->query("SELECT email FROM users WHERE email='".$email."'");
if ($dupQuery != 0) {
print "Email already exists";
} else {
//store entry in database
}
有人能指出我正确的方向吗?谢谢!
答案 0 :(得分:2)
您需要一个执行数据库查找的新页面(在底部的Ajax代码中查看它引用的虚拟页面/whatever/directory/lookup_page.php
)。此页面将引用该页面,因此该页面必须存在或不起作用。如果电子邮件返回true,您可能想要找到一种方法来使用jQuery禁用提交按钮。如果电子邮件不在数据库中,则您的提交按钮将保持活动状态,用户完成后将单击“提交”。无论如何,希望这至少有助于理解Ajax。此外,我做了键盘而不是模糊,所以它通过键查找键。你可以改变它。
<form action="<?php echo get_template_directory_uri(); ?>/inc/form.php" method="post">
<label for="first_name">First Name: <span>(required)</span></label>
<input type="text" name="first_name" />
<label for="last_name">Last Name: <span>(required)</span></label>
<input type="text" name="last_name" />
<label for="email">Email: <span>(required)</span></label>
<input type="text" name="email" id="email" onKeyUp="AjaxLookup()">
<div id="emailchecker"></div>
<input type="submit">
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript">
function AjaxLookup() {
var emAddr = $('#email').val();
$.ajax({
url:"/whatever/directory/lookup_page.php?email="+emAddr,
success:function(result) {
$("#emailchecker").html(result);
}
});
}
</script>