Silverstripe/PHP/jQuery-一旦用户填写了表单，就可以防止每次访问时自动显示该表单
我一直在处理一个有两种状态的表单：在桌面视图中，页面加载5秒后表单从屏幕右侧滑出，然后用户可以单击按钮关闭/打开它。在移动视图中，表单由按钮触发并显示为弹出窗口 在构建表单时，我没有考虑到让表单自动滑入或弹出到每个页面会带来不便。我使用了HTML5会话存储来防止表单在页面加载时自动打开，如果用户已经关闭了表单 现在出现了一个问题，如果用户确实填写了表单，那么表单永远不会自动滑出或弹出。我认为这将涉及在表单提交时设置cookie，并在用户每次访问站点时维护cookie。然而，我对饼干不太熟悉——这对我来说绝对是一个新领域，因为我以前从未用饼干做过任何事情 作为旁注，我们涉及到SharpSpring集成（即，用户填写表单，并将其数据发送到SharpSpring帐户以供进一步营销使用，等等。不确定这对我的问题是否有用。） 以下是代码供参考： 引导样式HTML表单：Silverstripe/PHP/jQuery-一旦用户填写了表单，就可以防止每次访问时自动显示该表单,php,jquery,forms,cookies,silverstripe,Php,Jquery,Forms,Cookies,Silverstripe,我一直在处理一个有两种状态的表单：在桌面视图中，页面加载5秒后表单从屏幕右侧滑出，然后用户可以单击按钮关闭/打开它。在移动视图中，表单由按钮触发并显示为弹出窗口 在构建表单时，我没有考虑到让表单自动滑入或弹出到每个页面会带来不便。我使用了HTML5会话存储来防止表单在页面加载时自动打开，如果用户已经关闭了表单 现在出现了一个问题，如果用户确实填写了表单，那么表单永远不会自动滑出或弹出。我认为这将涉及在表单提交时设置cookie，并在用户每次访问站点时维护cookie。然而，我对饼干不太熟悉——这
<div class="mobile-view" style="right: 51px;">
<a class="mobile-btn">
<span class="glyphicon glyphicon-arrow-left icon-arrow-mobile mobile-form-btn"></span>
</a>
</div>
<div class="slider register-photo">
<div class="form-inner">
<div class="form-container">
<form method="post" enctype="multipart/form-data" id="browserHangForm">
<a class="sidebar">
<span class="glyphicon glyphicon-arrow-left icon-arrow arrow"></span>
</a>
<a class="closeBtn">
<span class="glyphicon glyphicon-remove"></span>
</a>
<h2 class="text-center black">Receive a free copy of so-and-so's book!
</h2>
<p class="light">-- Free Download --</p>
<p class="errors-container light">Please fill in the required fields.</p>
<div class="success">$SiteConfig.GatewayFormThankYou</div>
<div class="form-field-content">
<div class="form-group">
<input class="form-control FirstNameTxt" type="text" name="first_name" placeholder="*First Name"
autofocus="">
</div>
<div class="form-group">
<input class="form-control LastNameTxt" type="text" name="last_name" placeholder="*Last Name"
autofocus="">
</div>
<div class="form-group">
<input class="form-control EmailTxt" type="email" name="Email" placeholder="*Email"
autofocus="">
</div>
<div class="form-group">
<input class="form-control CompanyTxt" type="text" name="Company" placeholder="*Company"
autofocus="">
</div>
<div class="form-group submit-button">
<button class="btn btn-primary btn-block button-submit" type="button">Send it to me</button>
<img src="/themes/simple/images/ajax-loader.gif" class="progress" alt="Submitting...">
</div>
</div>
<br/>
<div class="privacy-link">
<a href="privacy-policy" class="already" target="_blank"><span
class="glyphicon glyphicon-lock icon-lock"></span>We will never share your information.</a>
</div>
</form>
<% if $SiteConfig.GatewayFormEmbedCodeID %>
<input type="hidden" id="gatewayEmbedID" value="$SiteConfig.GatewayFormEmbedCodeID" />
<script type="text/javascript">
var __ss_noform = __ss_noform || [];
__ss_noform.push(['baseURI', 'https://app-3QNAHNE212.marketingautomation.services/webforms/receivePostback/MzawMDEzMDcwBAA/']);
__ss_noform.push(['form', 'browserHangForm', '$SiteConfig.GatewayFormEmbedCodeID']);
__ss_noform.push(['submitType', 'manual']);
</script>
<script type="text/javascript"
src="https://koi-3QNAHNE212.marketingautomation.services/client/noform.js?ver=1.24"></script>
<% end_if %>
</div>
</div>
</div>
var uuu ss_noform=uuu ss_noform | |【】；
__推送（['baseURI'，'https://app-3QNAHNE212.marketingautomation.services/webforms/receivePostback/MzawMDEzMDcwBAA/']);
__推送（['form'，'browserHangForm'，'$SiteConfig.GatewayFormEmbedCodeID']）；
__推送（['submitType'，'manual']）；
jQuery.noConflict();
(function ($) {
$(document).ready(function () {
//This function checks if we are in mobile view or not to determine the
//UI behavior of the form.
window.onload = checkWindowSize();
var arrowicon = $(".arrow");
var overlay = $("#overlay");
var slidingDiv = $(".slider");
var closeBtn = $(".closeBtn");
var mobileBtn = $(".mobile-btn");
//When the page loads, check the screen size.
//If the screen size is less than 768px, you want to get the function
//that opens the form as a popup in the center of the screen
//Otherwise, you want it to be a slide-out animation from the right side
function checkWindowSize() {
if ($(window).width() <= 768) {
//get function to open form at center of screen
if(sessionStorage["PopupShown"] != 'yes'){
setTimeout(formModal, 5000);
function formModal() {
slidingDiv.addClass("showForm")
overlay.addClass("showOverlay");
overlay.removeClass('hideOverlay');
mobileBtn.addClass("hideBtn");
}
}
}
else {
//when we aren't in mobile view, let's just have the form slide out from the right
if(sessionStorage["PopupShown"] != 'yes'){
setTimeout(slideOut, 5000);
function slideOut() {
slidingDiv.animate({'right': '-20px'}).addClass('open');
arrowicon.addClass("glyphicon-arrow-right");
arrowicon.removeClass("glyphicon-arrow-left");
overlay.addClass("showOverlay");
overlay.removeClass("hideOverlay");
}
}
}
}
/*
------------------------------------------------------------
Functions to open/close form like a modal in center of screen in mobile view
------------------------------------------------------------
*/
mobileBtn.click(function () {
slidingDiv.addClass("showForm");
slidingDiv.removeClass("hideForm");
overlay.addClass("showOverlay");
overlay.removeClass('hideOverlay');
mobileBtn.addClass("hideBtn");
});
closeBtn.click(function () {
slidingDiv.addClass("hideForm");
slidingDiv.removeClass("showForm");
overlay.removeClass("showOverlay");
overlay.addClass("hideOverlay")
mobileBtn.removeClass("hideBtn");
sessionStorage["PopupShown"] = 'yes'; //Save in the sessionStorage if the modal has been shown
});
/*
------------------------------------------------------------
Function to slide the sidebar form out/in
------------------------------------------------------------
*/
arrowicon.click(function () {
if (slidingDiv.hasClass('open')) {
slidingDiv.animate({'right': '-390px'}).removeClass('open');
arrowicon.addClass("glyphicon-arrow-left");
arrowicon.removeClass("glyphicon-arrow-right");
overlay.removeClass("showOverlay");
overlay.addClass("hideOverlay");
sessionStorage["PopupShown"] = 'yes'; //Save in the sessionStorage if the modal has been shown
} else {
slidingDiv.animate({'right': '-20px'}).addClass('open');
arrowicon.addClass("glyphicon-arrow-right");
arrowicon.removeClass("glyphicon-arrow-left");
overlay.addClass("showOverlay");
overlay.removeClass("hideOverlay");
}
});
});
}(jQuery));
jQuery.noConflict（）；
（函数（$）{
$（文档）.ready（函数（）{
//此函数检查我们是否在移动视图中，以确定
//表单的UI行为。
window.onload=checkWindowsSize（）；
变量arrowicon=$（“.arrow”）；
var overlay=$（“#overlay”）；
var slidingDiv=$（“.slider”）；
var closeBtn=$（“.closeBtn”）；
var mobileBtn=$（“.mobileBtn”）；
//加载页面时，检查屏幕大小。
//如果屏幕大小小于768px，则需要获取该函数
//在屏幕中央以弹出窗口的形式打开窗体
//否则，您希望它是从右侧滑出的动画
函数checkWindowsSize（）{
if（$（window）.width（）getRequest（）->postVar（'firstname'）；
$lastname=$this->getRequest（）->postVar（'lastname'）；
$emailfield=$this->getRequest（）->postVar（'useremail'）；
$company=$this->getRequest（）->postVar（'company'）；
$return=[]；
如果（！filter\u var（$emailfield，filter\u VALIDATE\u EMAIL））{
$validationstatus=“错误”；
$errorField=“电子邮件”；
}
否则{
$gatewaysubmission=新GatewayFormSubmission（）；
$gatewaysubmission->FirstName=$FirstName；
$gatewaysubmission->LastName=$LastName；
$gatewaysubmission->Email=$emailfield；
$gatewaysubmission->Company=$Company；
$gatewaysubmission->write（）；
$validationstatus=“成功”；
$errorField=“”；
$from=“[电子邮件]”；
$to=“[电子邮件]”；
$cc=“[电子邮件]”；
$subject='网关表单提交'；
$body=“以下是用户提交的表单信息：”。“
”；
$body.=“名字：”$firstname.
“姓氏：”$lastname.
“电子邮件：”$emailfield.
“公司：”$Company.
”；
$email=新邮件（$from，$to，$subject，$body）；
$email->setReplyto（$emailfield）；
$email->setCc（$cc）；
$email->send（）；
}
$return[]=数组(
“状态”=>$ValidationStatus，
“字段”=>$errorField，
);
返回json_encode（$return）；
}
function setCookie(cname,cvalue,exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires=" + d.toGMTString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
$.ajax({
type: "POST",
url: "/home/submitGatewayForm",
data: formData,
dataType: "json",
}).done(function (response) {
submitbtn.show();
SubmitProgress.hide();
for (var i = 0; i < response.length; i++) {
var status = response[i].status;
if (status == "error") {
if (response[i].field == "email") {
error.show();
EmailAddress.addClass("error-field");
}
}
else if (status == "success") {
__ss_noform.push(['submit', null, sharpSpringID]);
//set cookie when the form has been submitted
setCookie('ReceivedDownload','PdfSub', 3650);
$('#browserHangForm')[0].reset();
$('.form-field-content').hide();
successMessage.show();
$('.button-submit').html("Submitted");
}
}
});
函数setCookie（cname、cvalue、exdays）{
var d=新日期（）；
d、 设置时间（d.getTime（）+（exdays*24*60*60*1000））；
var expires=“expires=“+d.togmString（）；
document.cookie=cname+“=”+cvalue+”；“+expires+”；path=/”；
}
$.ajax({
类型：“POST”，
url:“/home/submitGatewayForm”，
数据：formData，
数据类型：“json”，
}).完成（功能（响应）{
submitbtn.show（）；
SubmitProgress.hide（）；
对于（变量i=0；ifunction checkWindowSize() {
if ($(window).width() <= 768) {
//get function to open form at center of screen
if(sessionStorage["PopupShown"] != 'yes' && !checkCookie()){
setTimeout(formModal, 5000);
function formModal() {
slidingDiv.addClass("showForm")
overlay.addClass("showOverlay");
overlay.removeClass('hideOverlay');
mobileBtn.addClass("hideBtn");
}
}
}
else {
//when we aren't in mobile view, let's just have the form slide out from the right
if(sessionStorage["PopupShown"] != 'yes' && !checkCookie()){
setTimeout(slideOut, 5000);
function slideOut() {
slidingDiv.animate({'right': '-20px'}).addClass('open');
arrowicon.addClass("glyphicon-arrow-right");
arrowicon.removeClass("glyphicon-arrow-left");
overlay.addClass("showOverlay");
overlay.removeClass("hideOverlay");
}
}
}
}
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
function checkCookie() {
var user = getCookie("ReceivedDownload");
if (user != "") {
return true;
} else {
return false;
}
}
函数checkWindowsSize（）{
如果（$（window）.width（）用户登录到您的站点，则
function setCookie(cname,cvalue,exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires=" + d.toGMTString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
$.ajax({
type: "POST",
url: "/home/submitGatewayForm",
data: formData,
dataType: "json",
}).done(function (response) {
submitbtn.show();
SubmitProgress.hide();
for (var i = 0; i < response.length; i++) {
var status = response[i].status;
if (status == "error") {
if (response[i].field == "email") {
error.show();
EmailAddress.addClass("error-field");
}
}
else if (status == "success") {
__ss_noform.push(['submit', null, sharpSpringID]);
//set cookie when the form has been submitted
setCookie('ReceivedDownload','PdfSub', 3650);
$('#browserHangForm')[0].reset();
$('.form-field-content').hide();
successMessage.show();
$('.button-submit').html("Submitted");
}
}
});
function checkWindowSize() {
if ($(window).width() <= 768) {
//get function to open form at center of screen
if(sessionStorage["PopupShown"] != 'yes' && !checkCookie()){
setTimeout(formModal, 5000);
function formModal() {
slidingDiv.addClass("showForm")
overlay.addClass("showOverlay");
overlay.removeClass('hideOverlay');
mobileBtn.addClass("hideBtn");
}
}
}
else {
//when we aren't in mobile view, let's just have the form slide out from the right
if(sessionStorage["PopupShown"] != 'yes' && !checkCookie()){
setTimeout(slideOut, 5000);
function slideOut() {
slidingDiv.animate({'right': '-20px'}).addClass('open');
arrowicon.addClass("glyphicon-arrow-right");
arrowicon.removeClass("glyphicon-arrow-left");
overlay.addClass("showOverlay");
overlay.removeClass("hideOverlay");
}
}
}
}
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
function checkCookie() {
var user = getCookie("ReceivedDownload");
if (user != "") {
return true;
} else {
return false;
}
}