2013-10-27 2 views
1

개체의 양식에서 정보를 캡처하여 해당 개체를 localStorage에 저장할 수 있도록 JavaScript의 함수를 사용하고 싶습니다.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> 

는 난 단지, 그래서 어떤 제안은 매우 도움이 될 것입니다이 자바 스크립트로 할 필요가있다.

+1

전화가 걸리지 않았습니까? 콘솔에서 '네비게이션시 로그 저장'을 켰습니까 (크롬을 사용하는 경우)? – techfoobar

답변

1

대부분의 경우 문제는 onsubmit 이벤트의 기본 동작을 방지하지 못했기 때문일 수 있습니다. submit 기능 끝에 return false을 추가하십시오.

이렇게하지 않으면 양식이 현재 페이지에 정보를 POST 시도하여 페이지를 새로 고치고 사용자 데이터를 삭제합니다. 해당 데이터를 캡처하려면 Javascript가 아닌 다른 것을 사용해야합니다.

관련 문제