2015-10-19 103 views
-1

我使用HTML5 sessionStorage來幫助在刷新時填充表單字段,但我遇到一些奇怪的錯誤。基本上,如果我改變任何值,表單停止工作。HTML5 sessionStorage未按預期工作

我現在寫的這個表格就在這裏; http://jsfiddle.net/takuhii/rjsjj9by/1/

HTML:

<form id="storeFields" method="post" action=""> 
    <label>First Name:</label> 
    <input type="text" name="firstname" id="firstName" class="form-control" value="" /> 

    <label>Last Name:</label> 
    <input type="text" name="lastname" id="lastName" class="form-control" value="" /> 

    <label>Email:</label> 
    <input type="email" name="email" id="email" class="form-control" value="" /> 

    <input type="submit" class="demo-button" value="Submit" /> 
</form> 

JAVASCRIPT:

function storeDetails() { 
    if (sessionStorage["firstname"]) { 
     $('#firstName').val(sessionStorage["firstname"]); 
    } 
    if (sessionStorage["lastname"]) { 
     $('#lastName').val(sessionStorage["lastname"]); 
    } 
    if (sessionStorage["email"]) { 
     $('#email').val(sessionStorage["email"]); 
    } 
} 
storeDetails(); 

$('.form-control').change(function() { 
    sessionStorage[$(this).attr('firstName')] = $(this).val(); 
    sessionStorage[$(this).attr('lastName')] = $(this).val(); 
    sessionStorage[$(this).attr('email')] = $(this).val(); 
}); 

$('#storeFields').submit(function() { 
    sessionStorage.clear(); 
}); 

我衍生它從該表格是在這裏; http://jsfiddle.net/takuhii/45zfpfru/8/

HTML:

<form id="storeFields" method="post" action=""> 
    <label>Name:</label> 
    <input type="text" name="name" id="name" class="stored" value="" /> 

    <label>Email:</label> 
    <input type="email" name="email" id="email" class="stored" value="" /> 

    <label>Message:</label> 
    <textarea name="message" id="message" class="stored"></textarea> 

    <input type="submit" class="demo-button" value="Submit" /> 
</form> 

JAVASCRIPT;

function storeDetails() { 
    if (localStorage["name"]) { 
     $('#name').val(localStorage["name"]); 
    } 
    if (localStorage["email"]) { 
     $('#email').val(localStorage["email"]); 
    } 
    if (localStorage["message"]) { 
     $('#message').val(localStorage["message"]); 
    } 
} 
storeDetails(); 

$('.stored').keyup(function() { 
    localStorage[$(this).attr('name')] = $(this).val(); 
}); 

$('#storeFields').submit(function() { 
    localStorage.clear(); 
}); 

我不明白的是簡單地改變它看起來的變量,是如何把整個形式?

任何幫助將不勝感激,因爲我實在看不出有什麼不對

如果這是另外一個問題重複,我提前道歉,因爲我試圖尋找,但沒找到滿意的答覆...... 乾杯 達倫

+1

你看過在開發者控制檯中打印的錯誤嗎?如果是這樣,你做了什麼嘗試和解決它們? – meagar

+0

有沒有錯誤,它只是不會將信息保存到sessionStorage :( – Takuhii

回答

1

在您的JS試試這個:

$('.form-control').change(function() { 
    sessionStorage[$(this).attr('id')] = $(this).val(); 
}); 

你想使用id屬性(名字,姓氏,電子郵件)的值來設定的關鍵正確的會話值。在你的代碼中,你正在尋找不存在的屬性。

+0

我會給它一個旋風,但我也這麼認爲。我已經嘗試命名所有東西都一樣都稱爲firstName,但形式只是當所有的東西都叫做名字時,開心:S – Takuhii