如何在php中添加按钮而不是错误状态和成功消息
How to add button instead of error status and success message in php?
我已经使用php、创建了订阅按钮
Html:
<div id="newsletterform">
<h2>Get Email Update</h2>
<form action="send.php" method="post" id="newsletter" name="newsletter">
<input type="email" name="signup-email" id="signup-email" value="" placeholder="Insert email here" />
<input type="submit" value="Subscribe" name="signup-button" id="signup-button">
<span class="arrow"></span>
</form>
<div id="response"></div>
</div>
现在我发现了一些按钮的点击效果,这里是链接,http://tympanus.net/Development/CreativeButtons/
在上面的第7部分[绿色部分]中,它有两个提交表单按钮。
一个表示成功,一个表示错误,所以我需要在订阅表单中使用它们,我的意思是转到我的send.php。
所以,当我点击订阅按钮而不输入电子邮件时,它会显示按钮上写着"错误",而不是通知。
我可以知道,有可能做到这一点吗?
如有任何帮助,我们将不胜感激。
有一种简单的方法可以进行ding,因此您可以放置两个按钮并将错误按钮赋予css display:none;
如jquery
else {
$status = "error";
$message = "An error occurred, please try again";
$('.button-error').show();
$('.button-success').hide();
}
这样你就可以实现你想要的
下载并将component.css
放在css
文件夹中,然后将其添加到<head>
:
<link rel="stylesheet" type="text/css" href="css/component.css" />
HTML:
<div id="newsletterform">
<h2>Get Email Update</h2>
<form method="post" id="newsletter" name="newsletter">
<input type="email" name="signup-email" id="signup-email" value="" placeholder="Insert email here" />
<input type="submit" value="Subscribe" name="signup-button" id="signup-button" class="btn btn-7 btn-7h icon-envelope">
<span class="arrow"></span>
</form>
<div id="response">
<?php if (isset($_POST['signup-button']) { ?>
<span color="<?=($status=='success')?'green':'red';?>"><?=$message;?></span>
<?php } ?>
</div>
</div>
在关闭</body>
:之前放置
<?php if ($status == "error") { ?>
<script>
document.getElementById('signup-button').className = "btn btn-7 btn-7h icon-envelope btn-error";
setTimeout(function() {
document.getElementById('signup-button').className = "btn btn-7 btn-7h icon-envelope";
}, 1000);
</script>
<?php } ?>
将以下内容放在footer.php
或index.php
(其中include()
是footer.php
)的顶部
<?php
if (isset($_POST['signup-button'])) {
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 = "error";
$message = "An error occurred, please try again";
}
} else {
$status = "error";
$message = "This email is already subscribed";
}
}
$data = array(
'status' => $status,
'message' => $message
);
echo json_encode($data);
$db = null;
}
catch(PDOException $e) {
echo $e->getMessage();
}
}
?>
也可以看看这里:
http://jsfiddle.net/8ft0ye6k/3/
希望能有所帮助。
在此处使用此演示
添加这个css和js这应该可以
<link rel="stylesheet" type="text/css" href="http://tympanus.net/Development/CreativeButtons/css/default.css" />
<link rel="stylesheet" type="text/css" href="http://tympanus.net/Development/CreativeButtons/css/component.css" />
<script src="http://tympanus.net/Development/CreativeButtons/js/modernizr.custom.js"></script>
<script src="http://tympanus.net/Development/CreativeButtons/js/classie.js"></script>
$status = "<button class="btn btn-1 btn-1a">Button</button>";
$message = "An error occurred, please try again";
$status = "<button class="btn btn-1 btn-1a">Button</button>";
$message = "This email is already subscribed";
相关文章:
- AJAX错误状态代码500内部服务器错误
- 处理角度.js承诺错误状态
- 如何在php中添加按钮而不是错误状态和成功消息
- 尽管成功传输了 json,但我的 Jquery.ajax 方法在响应中获得了错误状态
- Backbone.sync 获取所有响应错误状态代码
- AngularJS:如何获取$http的错误状态
- "回滚”;Ember模板中的错误状态
- Javascript:Phoenix频道立即进入错误状态
- Ember.js - Pod结构中的错误状态
- 根据用户选择/选项可用性切换选择框错误状态
- AngularJS验证更新另一个输入字段的错误状态
- 如果JSON中的键值为空,则发送错误状态(AJAX、Node和Express)
- ajax错误状态0与空错误在GETcalls
- Websocket错误:Websocket握手过程中出现错误:状态行中没有找到响应代码
- 如何获取NodeJS的错误状态码
- XMLHttpRequest总是调用";负载";事件侦听器,即使响应具有错误状态
- ui路由器解析功能中的处理错误?(又名$stateChangeError)将数据传递到错误状态
- 哪个 Http 错误/状态代码是合适的
- 错误状态:使用angular js和codeigniter 2.2
- 如何显示错误的密码在Firebase简单登录电子邮件密码的错误状态