2013-10-27 26 views
1

我想在JavaScript中使用函數從 對象的表單中捕獲信息,以便我可以將該對象存儲在localStorage中。以javascript的形式捕獲信息

但是,當我使用窗體標籤函數似乎並沒有被調用。

我需要改變窗體中的東西或刪除窗體標籤嗎?

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset = "utf-8"> 
     <title>Test form and localstorage</title> 
     <script> 
     function submit(){ 
      var client = { 
      Name: document.forms['contact']['name'].value, 
      Age: document.forms['contact']['age'].value, 
      Sex: document.forms['contact']['sex'].value 
      } 
      console.log(client); 
      localStorage.setItem('client',JSON.stringify(client)); 
          } 
     </script> 
     </head> 
<body> 
    <form name = "contact" method = "post" action="#" onsubmit = "submit()"> 
    <table> 
     <tbody> 
      <tr> 
       <td class = "blockSize" id = "td1">Name:</td> 
       <td class = "blockSize" id = "td2"><input type = "text" name = "name"></td> 
      </tr> 
      <tr> 
       <td class = "blockSize" id = "td3">Age:</td> 
       <td class = "blockSize" id = "td4"><input type = "text" name = "age"></td> 
      </tr> 
      <tr> 
       <td class = "blockSize" id = "td5">Sex:</td> 
       <td class = "blockSize" id = "td6"><input type = "text" name = "sex"></td> 
      </tr> 
     </tbody> 
     <button type = "submit">Submit</button> 
    </table> 
    </form> 
</body> 

我需要它僅限於JavaScript,所以任何建議都會非常有幫助。

+1

你確定它沒有被調用。你有沒有打開控制檯上的「保存日誌導航」(如果使用chrome)? – techfoobar

回答

1

很可能,您遇到的問題是您沒有阻止onsubmit事件的默認行爲。嘗試將return false添加到您的submit函數的末尾。

如果您不這樣做,表單會嘗試將POST信息發送到當前所在的頁面,這將刷新頁面並刪除用戶的數據。如果你想捕獲這些數據,你將需要使用Javascript以外的東西。