Javascript 设置jquery按钮而不是php错误和成功状态
这是我的index.html:Javascript 设置jquery按钮而不是php错误和成功状态,javascript,php,jquery,html,Javascript,Php,Jquery,Html,这是我的index.html: <body> <div id="newsletterform"> <div class="wrap"> <h3>Get Email Update</h3> <form action="send.php" method="post" id="newsletter" name="newsletter
<body>
<div id="newsletterform">
<div class="wrap">
<h3>Get Email Update</h3>
<form action="send.php" method="post" id="newsletter" name="newsletter">
<input type="email" name="signup-email" id="signup-email" value="" placeholder="Insert email here" />
<button class="btn btn-7 btn-7h icon-envelope">Submit form</button>
<span class="arrow"></span>
</form>
<div id="response"></div>
</div>
</div>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="assets/js/lib.js"></script>
</body>
获取电子邮件更新
提交表格
下面是我的send.php:
<?php
$host = "";
$dbname = "";
$user = "";
$pass = "";
$email = filter_var($_POST['signup-email'], FILTER_SANITIZE_EMAIL);
$datetime = date('Y-m-d H:i:s');
try {
$db = new PDO("mysql:host=$host;dbname=$dbname", $user, $pass);
if (empty($email)) {
$status = "error";
$message = "The email address field must not be blank";
} else if (!preg_match('/^[^0-9][A-z0-9._%+-]+([.][A-z0-9_]+)*[@][A-z0-9_]+([.][A-z0-9_]+)*[.][A-z]{2,4}$/', $email)) {
$status = "error";
$message = "You must fill the field with a valid email address";
} else {
$existingSignup = $db->prepare("SELECT COUNT(*) FROM signups WHERE signup_email_address='$email'");
$existingSignup->execute();
$data_exists = ($existingSignup->fetchColumn() > 0) ? true : false;
if (!$data_exists) {
$sql = "INSERT INTO signups (signup_email_address, signup_date) VALUES (:email, :datetime)";
$q = $db->prepare($sql);
$q->execute(
array(
':email' => $email,
':datetime' => $datetime
));
if ($q) {
$status = "success";
$message = "You have been successfully subscribed";
} else {
$status = "<button class="btn btn-7 btn-7h icon-envelope">Submit form</button>";
$message = "An error occurred, please try again";
}
} else {
$status = "<button class="btn btn-7 btn-7h icon-envelope">Submit form</button>";
$message = "This email is already subscribed";
}
}
$data = array(
'status' => $status,
'message' => $message
);
echo json_encode($data);
$db = null;
}
catch(PDOException $e) {
echo $e->getMessage();
}
?>
PHP中的
设置$status
,并显示结果是“错误”还是“成功”
if (!$data_exists) {
$sql = "INSERT INTO signups (signup_email_address, signup_date) VALUES (:email, :datetime)";
$q = $db->prepare($sql);
$q->execute(
array(
':email' => $email,
':datetime' => $datetime
));
if ($q) {
$status = "success";
$message = "You have been successfully subscribed";
} else {
$status = "error";
$message = "An error occurred, please try again";
}
} else {
$status = "error";
$message = "This email is already subscribed";
}
在HTML中,向按钮添加一个id
,如id=“actbtn”
提交表单
在Javascript中,将ajax请求更新为
$(document).ready(function () {
$('#newsletter').submit(function () {
var $this = $(this),
$response = $('#response'),
$mail = $('#signup-email'),
testmail = /^[^0-9][A-z0-9._%+-]+([.][A-z0-9_]+)*[@][A-z0-9_]+([.][A-z0-9_]+)*[.][A-z]{2,4}$/,
hasError = false;
$response.find('p').remove();
if (!testmail.test($mail.val())) {
$('#actbtn').removeClass('btn-error').addClass('btn-error');
//$response.html('<p class="error">Please enter a valid email</p>');
hasError = true;
}
if (hasError === false) {
$response.find('p').remove();
$response.addClass('loading');
$.ajax({
type: "POST",
dataType: 'json',
cache: false,
url: $this.attr('action'),
data: $this.serialize(),
success: function(data){
if(data!=''){
$response.removeClass('loading');
if(data.status == 'success'){
$('#actbtn').removeClass('btn-error').addClass('btn-success');
}
else{
$('#actbtn').removeClass('btn-error').addClass('btn-error');
}
}
}
});
}
return false;
});
});
$(文档).ready(函数(){
$(“#时事通讯”).submit(函数(){
变量$this=$(this),
$response=$(“#response”),
$mail=$(“#注册电子邮件”),
测试邮件=/^[^0-9][A-z0-9.+-]+([.][A-z0-9+])*[@][A-z0-9+([.][A-z0-9+])*[.][A-z]{2,4}$/,,
hasError=false;
$response.find('p').remove();
如果(!testmail.test($mail.val())){
$('#actbtn').removeClass('btn-error').addClass('btn-error');
//$response.html(“请输入有效的电子邮件”
”;
hasrerror=true;
}
如果(hasError==false){
$response.find('p').remove();
$response.addClass('loading');
$.ajax({
类型:“POST”,
数据类型:“json”,
cache:false,
url:$this.attr('action'),
数据:$this.serialize(),
成功:功能(数据){
如果(数据!=''){
$response.removeClass('load');
如果(data.status==“成功”){
$('#actbtn').removeClass('btn-error').addClass('btn-success');
}
否则{
$('#actbtn').removeClass('btn-error').addClass('btn-error');
}
}
}
});
}
返回false;
});
});
应该是这样的<代码>“提交表格”
您已经将按钮分配给了status
变量,您不能根据错误或成功的位置添加CSS类吗?我添加了@Lepanto:但它不起作用..您能用您拥有的更新上面的代码吗now@Ranjith例如它不起作用。。
$(document).ready(function () {
$('#newsletter').submit(function () {
var $this = $(this),
$response = $('#response'),
$mail = $('#signup-email'),
testmail = /^[^0-9][A-z0-9._%+-]+([.][A-z0-9_]+)*[@][A-z0-9_]+([.][A-z0-9_]+)*[.][A-z]{2,4}$/,
hasError = false;
$response.find('p').remove();
if (!testmail.test($mail.val())) {
$('#actbtn').removeClass('btn-error').addClass('btn-error');
//$response.html('<p class="error">Please enter a valid email</p>');
hasError = true;
}
if (hasError === false) {
$response.find('p').remove();
$response.addClass('loading');
$.ajax({
type: "POST",
dataType: 'json',
cache: false,
url: $this.attr('action'),
data: $this.serialize(),
success: function(data){
if(data!=''){
$response.removeClass('loading');
if(data.status == 'success'){
$('#actbtn').removeClass('btn-error').addClass('btn-success');
}
else{
$('#actbtn').removeClass('btn-error').addClass('btn-error');
}
}
}
});
}
return false;
});
});