After submit is clicked, I would like jQuery to act slightly different. Cache?

Question

I have a jQuery contact form that has the first page visible (using css) upon entering my website. After a user completes the form, I would like them to be able to visit other pages of the site without the form reopening upon page load. Does anyone have a good way to do this? It would be great if it would be visible again after they actually close / leave the website. Thank you!

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

THANK YOU!!!

score 0 · Answer 1 · edited May 23 '17 at 10:32

You'll need to adapt it for your purposes but the basic concept is that you want to save any changes made to the form as they happen to a cookie. Saving to a cookie ensures they will be available when the user leaves the site and comes back (unlike a session). This cookie is then checked for and read into the form when the page is loaded.

Demo Fiddle

nb. Fiddle may not behave as anticipated due to jsfiddle.net limitations

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

Refs: 1. https://stackoverflow.com/a/6567102/404335 2. https://stackoverflow.com/a/4825695/404335

score 0 · Answer 2 · edited May 23 '17 at 10:25

0

Sidenote: Do you know your formular will never be send to the server this way? No Form Tag, No Action, No Submit with JS.

Anyway, as in the comment said, you need a session cookie (or sessionStorage).

More information about how to set and get cookies with Javascript you can find here: How do I create and read a value from cookie?

Also the information on W3Schools arnt bad on that topic: http://www.w3schools.com/js/js_cookies.asp (w3schools got some bugs on other tipics!)

edited May 23 '17 at 10:25

Community

1
1

answered Dec 19 '13 at 16:10

nbar

6,028
2
24
65

Hey man. Thanks for the concern. Actually, yes I'm aware. I'm using ASP with C# to submit my form, I just posted like this for simplicity. Thanks I will check that out! – toad Dec 19 '13 at 16:34

After submit is clicked, I would like jQuery to act slightly different. Cache?

2 Answers2

Demo Fiddle