Question

I have been using a demo site since yesterday and made a version on my own site.

Here is the demo site:
http://rikrikrik.com/jquery/autosave/

Here is the exact code that is on my site:
http://jsfiddle.net/EswfB/1/

The problem:
Delete related cookies is not working properly.

It sometimes works and sometimes doesn’t. Usually will only work when I click it, refresh, click restore and click delete again.

Now, the demo site and my site were working perfectly yesterday, turn off my machine, return today and neither work. Don’t work on my colleagues machine either.

Using Chrome and FF.

Any ideas?

The address bar shows no signs of href=”#” when delete related cookies is clicked. Also delete related cookies does nothing.

Answer 1

I would recommend to use localStorage in JavaScript, that’s easy to manage. You would save a lot of code. http://jsfiddle.net/EswfB/8/

function save() {
    var firstname = document.profileForm.First_name.value;
    var lastname = document.profileForm.Last_name.value;
    if(document.getElementById("GenderMale").checked) {
        var gender = "Male";
    }
    else if(document.getElementById("GenderFemale").checked) {
        var gender = "Female";
    }
    var howdowecontactyou = document.profileForm.How_do_we_contact_you.value;
    var preferredtimeofcontact = document.profileForm.Preferred_time_of_contact.value;
    var jobtitle = document.profileForm.Job_title.value;
    localStorage.setItem("firstname", firstname);
    localStorage.setItem("lastname", lastname);
    localStorage.setItem("gender", gender);
    localStorage.setItem("howdowecontactyou", howdowecontactyou);
    localStorage.setItem("preferredtimeofcontact", preferredtimeofcontact);
    localStorage.setItem("jobtitle", jobtitle);
    document.getElementById("autosave_saving").innerHTML = "Saved!";
}
function load() {
    var firstname =  localStorage.getItem("firstname");
    var lastname =  localStorage.getItem("lastname");
    var gender =  localStorage.getItem("gender");
    var howdowecontactyou =  localStorage.getItem("howdowecontactyou");
    var preferredtimeofcontact =  localStorage.getItem("preferredtimeofcontact");
    var jobtitle =  localStorage.getItem("jobtitle");
    document.profileForm.First_name.value = firstname;
    document.profileForm.Last_name.value = lastname;
    if(gender == "Male") {
        document.getElementById("GenderMale").checked = true;
        document.getElementById("GenderFemale").checked = false;
    }
    if(gender == "Female") {
        document.getElementById("GenderMale").checked = false;
        document.getElementById("GenderFemale").checked = true;
    }
    document.profileForm.How_do_we_contact_you.value = howdowecontactyou;
    document.profileForm.Preferred_time_of_contact.value = preferredtimeofcontact
    document.profileForm.Job_title.value = jobtitle;
}
function deleteStorage() {
    localStorage.removeItem("firstname");
    localStorage.removeItem("lastname");
    localStorage.removeItem("gender");
    localStorage.removeItem("howdowecontactyou");
    localStorage.removeItem("preferredtimeofcontact");
    localStorage.removeItem("jobtitle");
}
​

And HTML:

<p><button class="autosave" OnClick="save()">Save form</button> <button class="autosave_restore" OnClick="load()">Restore form</button> <input type="RESET" value="Default Form"> <button OnClick="deleteStorage()" class="autosave_removecookies">Delete related cookies</button> <span class="autosave_saving" id="autosave_saving"></span></p>
<!-- Licensed software, from www.freecontactform.com -->
<form name="profileForm" accept-charset="utf-8" method="post" action="forms/simple_form/_process.php" onSubmit="return validate.check(this)">
<table class="widthOneHundredPercent">
<tr>
<td class="tableCellFloat widthFortyPercent" valign="top">
<label for="First_name" class="required">First name<span class="required_star"> * </span></label>
</td>
<td class="tableCellFloat" valign="top">
<input type="text" name="First_name" id="First_name" maxlength="50" value="" placeholder="First name"/>
</td>
</tr>
<tr>
<td class="tableCellFloat widthFortyPercent" valign="top">
<label for="Last_name" class="required">Last name<span class="required_star"> * </span></label>
</td>
<td class="tableCellFloat" valign="top">
<input type="text" name="Last_name" id="Last_name" maxlength="50" value="" placeholder="Last name"/>
</td>
</tr>
<tr>
<td class="tableCellFloat columnOne" valign="top">
<label for="Gender">Gender</label></td>
</td>
<td class="tableCellFloat columnTwo" valign="top">
<input type="radio" name="Gender" value="Male" id="GenderMale" />Male<br />
<input type="radio" name="Gender" value="Female" id="GenderFemale" />Female<br />
</td>
</tr>
<tr>
<td class="tableCellFloat widthFortyPercent" valign="top">
<label for="How_do_we_contact_you?" class="required">How do we contact you?<span class="required_star"> * </span></label>
</td>
<td class="tableCellFloat" valign="top">
<select class="tableCellFloat" id="How_do_we_contact_you" name="How_do_we_contact_you">
<option value="">Please select...</option>
<option value="Email">Email</option>
<option value="Phone">Phone</option>
<option value="Text">Text</option>
</select>
</td>
</tr>
<tr>
<td class="tableCellFloat widthFortyPercent" valign="top">
<label for="Preferred_time_of_contact">Preferred time of contact?</label>
</td>
<td class="tableCellFloat" valign="top">
<select class="tableCellFloat" id="Preferred_time_of_contact" name="Preferred_time_of_contact">
<option value="">Please select...</option>
<option value="08:00_-_12:00">08:00 - 12:00</option>
<option value="12:00_-_17:30">12:00 - 17:30</option>
<option value="17:30_-_20:00">17:30 - 20:00</option>
<option value="Anytime">Anytime</option>
</select>
</td>
</tr>
<tr>
<td class="tableCellFloat widthFortyPercent" valign="top">
<label for="Job_title">Job title</label>
</td>
<td class="tableCellFloat" valign="top">
<input type="text" name="Job_title" id="Job_title" maxlength="50" value="" placeholder="Job title"/>
</td>
</tr>
</table>    
<div class="clearboth">&nbsp;</div>
<center><input type="SUBMIT" value="submit"></center>
</form>​