Demo Fiddle

Question

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

HTML

<!DOCTYPE html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/isleymultiform.js"></script>
<link rel="stylesheet" href="css/isleymultiform.css" type="text/css" />
</head>
<body>
<div id="request"><p class="button">REQUEST INFO</p></div>
    <div id="form_container">
        <div id="page_1">
        <p class="form">
            <label>Email Address: </label><br /><input value="Email Address"></input>
            <br /><br />
            <label>Your Desired Degree: </label><br /><select id="select_length"><option>Science</option><option>Math</option><option>Yoga</option></select>
            <br /><br />
            <input type="button" id="to_page_2" value="Next"/>
        </p>
        </div>
        <div id="page_2">
                <p class="form">
            <label>First Name: </label><br /><input value="First Name"></input>
            <br /><br />
            <label>Last Name: </label><br /><input value="Last Name"></input>
            <br /><br />
            <label>Phone Number: </label><br /><input value="Phone Number"></input>
            <br /><br />
            <label>Preferred Location: </label><br /><select id="select_length"><option>Minneapolis, MN</option></select>
            <br /><br />                                    
            <label>High School Graduation: </label><br /><select><option>2001</option><option>2002</option><option>2003</option></select>
            <br /><br />  
            <br /><br />
            <input type="button" id="to_prev" value="Previous"></input>
            <button id="to_close">Submit</button>
        </p>
        </div>
       </div>
    </div>
</body>
</html>

JAVASCRIPT

$(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");
    });
});

CSS

#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;
}

谢谢!!!

Answer 1

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

Demo Fiddle

NB。由于jsfiddle.net限制，小提琴可能无法按预期行事

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);
});

参考文献： 1. https://stackoverflow.com/a/6567102/404335 2. https://stackoverflow.com/a/4825695/404335

Answer 2

旁注：您知道您的公式永远不会以这种方式发送到服务器吗？没有表格标签，没有行动，没有提交JS。

无论如何，正如评论所说，你需要一个会话cookie（或sessionStorage）。

有关如何使用Javascript设置和获取Cookie的更多信息，请访问： How do I create and read a value from cookie?

关于W3Schools的信息在这个主题上也很糟糕：http://www.w3schools.com/js/js_cookies.asp（w3schools在其他技巧上遇到了一些错误！）

单击提交后，我希望jQuery的行为略有不同。缓存？

2 个答案:

Demo Fiddle