设置jQuery按钮,而不是PHP错误和成功状态 [英] Set jquery button instead of php error and success status
问题描述
这是我的index.html:
< body>
< div id =newsletterform>
< div class =wrap>
< h3>获取电子邮件更新< / h3>
< form action =send.phpmethod =postid =newslettername =newsletter>
< input type =emailname =signup-emailid =signup-emailvalue =placeholder =在此处插入电子邮件/>
< button class =btn btn-7 btn-7h icon-envelope>提交表单< / button>
< span class =arrow>< / span>
< / form>
< div id =response>< / div>
< / div>
< / div>
< 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');
$ b尝试{
$ db = new PDO(mysql:host = $ host; dbname = $ dbname,$ user,$ pass);
if(empty($ email)){
$ status =error;
$ message =电子邮件地址栏不能为空;
} else if(!preg_match('/ ^ [^ 0-9] [A-z0-9 ._%+ - ] +([。] [A-z0-9 _] +)* [@] [A-z0-9 _] +([。] [A-z0-9 _] +)* [。] [Az] {2,4} $ /',$ email)){
$ status =错误;
$ message =您必须填写有效的电子邮件地址;
} else {
$ existingSignup = $ db-> prepare(SELECT COUNT(*)FROM signups WHERE signup_email_address ='$ email');
$ existingSignup-> execute();
$ data_exists =($ existingSignup-> fetchColumn()> 0)?真假;如果(!$ 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 =您已成功订阅;
} else {
$ status =< button class =btn btn-7 btn-7h icon-envelope> Submit form< / button>;
$ message =发生错误,请重试;
} else {
$ status =< button class =btn btn-7 btn-7h icon-envelope> Submit form< / button>;
$ message =这封电子邮件已被订阅;
$ data = array(
'status'=> $ status,
'message'=> $ message
);
echo json_encode($ data);
$ db = null;
}
catch(PDOException $ e){
echo $ e-> getMessage();
}
?>
我已经使用html,php和sql创建了订阅表单。
它工作正常,现在我需要更新像使用错误和成功按钮,而不是显示错误或成功消息。
以便我创建两个按钮是错误和成功,现在我需要添加在我的索引页面。如果我输入错误的电子邮件ID或空白或重复的邮件ID的手段,它显示错误按钮或其他成功按钮。
按钮应该是这样的:我已经在jsfiddle : http://jsfiddle.net/b9y5bunp/3/
我可以知道,如何实现这个,请提前致谢。 c $ c> $ status 与结果无论是'错误'还是'成功'
如果(!$ 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 =您已成功订阅;
} else {
$ status =error;
$ message =发生错误,请重试;
}
} else {
$ status =error;
$ message =这封电子邮件已被订阅;
}
在HTML中,添加 id
到 id =actbtn
< ; button id =actbtnclass =btn btn-7 btn-7h icon-envelope> Submit form< / button>
在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 _] + )* [。] [Az] {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>请输入一个有效的电子邮件< / 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;
});
});
Here is my index.html:
<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>
And here is my 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();
}
?>
I have been created subscribe form using html, php and sql.
It works fine, Now i need to update like, use error and success button instead of displayed error or success message.
so that i created two buttons that is error and success, Now i need to add in my index page. If i enter wrong email id or blank or repeated mail id means, it shows error button or else success button.
Button should be like this: I have been created in jsfiddle: http://jsfiddle.net/b9y5bunp/3/
May i know, how to achieve this one, Thanks in advance.
In PHP set $status
with the results whether it is 'error' or 'success'
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";
}
In HTML, add a id
to the button like id="actbtn"
<button id="actbtn" class="btn btn-7 btn-7h icon-envelope">Submit form</button>
In Javascript, updated the ajax request to following
$(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;
});
});
这篇关于设置jQuery按钮,而不是PHP错误和成功状态的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!