Javascript 单击submit之后，我希望jQuery的行为稍微有所不同。隐藏物

我有一个jQuery联系人表单，在进入我的网站时第一页是可见的（使用css）。用户完成表单后，我希望他们能够访问站点的其他页面，而不必在页面加载时重新打开表单。有没有人有一个很好的方法来做到这一点？如果在他们真正关闭/离开网站后，它再次可见，那就太好了。谢谢大家!

HTML

CSS

---

谢谢你

您需要根据自己的目的对其进行调整，但基本概念是，您希望在对cookie进行更改时保存对表单所做的任何更改。保存到cookie可确保用户离开站点并返回时这些cookie可用（与会话不同）。然后，在加载页面时，会检查此cookie并将其读入表单中

注意。由于jsfiddle.net的限制，Fiddle可能无法按预期运行

jQuery/Javascript

// Basic function for creating/setting cookies
function createCookie(name, value, days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        var expires = "; expires=" + date.toGMTString();
    } else var expires = "";
    document.cookie = name + "=" + value + expires + "; path=/";
}

// Basic function for getting/reading cookies
function getCookie(c_name) {
    if (document.cookie.length > 0) {
        c_start = document.cookie.indexOf(c_name + "=");
        if (c_start != -1) {
            c_start = c_start + c_name.length + 1;
            c_end = document.cookie.indexOf(";", c_start);
            if (c_end == -1) {
                c_end = document.cookie.length;
            }
            return unescape(document.cookie.substring(c_start, c_end));
        }
    }
    return "";
}

// Basic function to convert form fields and values into a string
function form2string($form) {
    return JSON.stringify($form.serializeArray());
}

// Basic function for getting form fields/values converted into a string and inputting into form elements
function string2form($form, serializedStr) {
    var fields = JSON.parse(serializedStr);
    for (var i = 0; i < fields.length; i++) {
        var controlName = fields[i].name;
        var controlValue = fields[i].value;
        $form.find("[name='+ controlName +']").val(controlValue);
    }
}

// Check if a cookie exists with the form data and if so populate the form on page load
prevData = getCookie('myFormData');
prevData && string2form($('form'), prevData);

// Set the cookie each time a form input is changed
$("form :input").change(function () {
    createCookie('myFormData', form2string($(this).closest('form')), 30);
});

//创建/设置cookie的基本功能
函数createCookie（名称、值、天数）{
如果（天）{
变量日期=新日期（）；
date.setTime（date.getTime（）+（天*24*60*60*1000））；
var expires=“；expires=“+date.togmString（）；
}else var expires=“”；
document.cookie=name+“=”+value+expires+“path=/”；
}
//获取/读取cookie的基本功能
函数getCookie（c_名称）{
如果（document.cookie.length>0）{
c_start=document.cookie.indexOf（c_name+“=”）；
如果（c_开始！=-1）{
c_start=c_start+c_name.length+1；
c_end=document.cookie.indexOf（“；”，c_start）；
如果（c_end==-1）{
c_end=document.cookie.length；
}
返回unescape（document.cookie.substring（c_start，c_end））；
}
}
返回“”；
}
//将表单字段和值转换为字符串的基本函数
函数form2string（$form）{
返回JSON.stringify（$form.serializeArray（））；
}
//用于将表单字段/值转换为字符串并输入表单元素的基本函数
函数string2form（$form，SerializedString）{
var fields=JSON.parse（serializedster）；
对于（变量i=0；i

参考文献： 1.

---

2.

旁注：你知道你的公式永远不会以这种方式发送到服务器吗？没有表单标签，没有操作，没有JS提交

无论如何，正如评论中所说，您需要会话cookie（或会话存储）

有关如何使用Javascript设置和获取Cookie的更多信息，您可以在此处找到：

---

关于W3Schools的信息在这个主题上也不错：（W3Schools在其他技巧上有一些bug！）

嘿，伙计。谢谢你的关心。事实上，是的，我知道。我使用ASP和C#来提交我的表单，为了简单起见，我只是这样发布。谢谢，我会查出来的！

$(document).ready(function(){
    $("#request").click(function(){
        $("#page_1").animate({"height": "220px"},
        "slow");
        $("#page_1").show("slow");
        $("#form_container").toggle("6000");
    });

    $("#to_page_2").click(function(){
        $("#page_2").show();
        $("#page_2").animate({"height": "400px"},
        "slow");
    });
    $("#to_close").click(function(){

        $("#page_2").hide("fast");
        $("#page_1").animate({"height": "0px"},
        "fast");
        $("#page_2").animate({"height": "0px"},
        "fast");
        $("#form_container").hide("fast");
    });

    $("#to_prev").click(function(){

        $("#page_2").hide("slow");
        $("#page_2").animate({"height": "0px"},
        "slow");
    });
});

#isley_globeform {
    display: block;
    position: absolute;
    right: 0;
    top:40px;
    z-index: 9990;
}

#form_container {
    display: block;
}

#page_1 {
    position: absolute;
    background-color: #7cac24;
    width: 180px;
    height: 220px;
    display: block;
    border-bottom-left-radius: 10px 10px;
    border-bottom-right-radius: 10px 10px;
    border-top-right-radius: 10px 10px;
}

#page_2 {
    position: absolute;
    background-color: #7cac24;
    width: 200px;
    height: 0px;
    display: none;
    border-bottom-left-radius: 10px 10px;
    border-bottom-right-radius: 10px 10px;
    border-top-right-radius: 10px 10px;
}

#request {
    display: block;
    position: relative;
    font-size: 16px;
    font-weight: bolder;
    background-color: #7cac24;
    width: 145px;
    height: 40px;
    z-index: 9998;
}

p.form {
    font-size: .9em;
    font-weight: bold;
    color: #FFF;
    margin-left: 10px;
}

p.button {
    padding: 8px 13px;
    font-size: 1em;
    font-weight: bold;
    color: #FFF;
    cursor: pointer;
}

#to_page_2 {
    position: relative;
    ;
    background-color: #FFF;
    right: -58px;
}

#to_close {
    position: relative;
    ;
    background-color: #FFF;
    right: -26px;
}

#to_prev {
    position: relative;
    ;
    background-color: #FFF;
    right: -10px;
}

.select_length {
    width: 155px;
}

// Basic function for creating/setting cookies
function createCookie(name, value, days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        var expires = "; expires=" + date.toGMTString();
    } else var expires = "";
    document.cookie = name + "=" + value + expires + "; path=/";
}

// Basic function for getting/reading cookies
function getCookie(c_name) {
    if (document.cookie.length > 0) {
        c_start = document.cookie.indexOf(c_name + "=");
        if (c_start != -1) {
            c_start = c_start + c_name.length + 1;
            c_end = document.cookie.indexOf(";", c_start);
            if (c_end == -1) {
                c_end = document.cookie.length;
            }
            return unescape(document.cookie.substring(c_start, c_end));
        }
    }
    return "";
}

// Basic function to convert form fields and values into a string
function form2string($form) {
    return JSON.stringify($form.serializeArray());
}

// Basic function for getting form fields/values converted into a string and inputting into form elements
function string2form($form, serializedStr) {
    var fields = JSON.parse(serializedStr);
    for (var i = 0; i < fields.length; i++) {
        var controlName = fields[i].name;
        var controlValue = fields[i].value;
        $form.find("[name='+ controlName +']").val(controlValue);
    }
}

// Check if a cookie exists with the form data and if so populate the form on page load
prevData = getCookie('myFormData');
prevData && string2form($('form'), prevData);

// Set the cookie each time a form input is changed
$("form :input").change(function () {
    createCookie('myFormData', form2string($(this).closest('form')), 30);
});