1

我想使用 JavaScript 中的函数从对象中的表单中捕获信息，以便我可以将该对象存储在 localStorage 中。

但是当我使用表单标签时，似乎没有调用该函数。

我需要更改表单中的某些内容或删除表单标签吗？

<!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 中，所以任何建议都会非常有帮助。

4

1 回答 1

1

您遇到的问题很可能是您没有阻止 onsubmit 事件的默认行为。尝试添加return false到submit函数的末尾。

如果您不这样做，表单将尝试POST将信息转到它当前所在的页面，这将刷新页面并删除用户的数据。如果要捕获该数据，则需要使用 Javascript 以外的东西。

于 2013-10-27T13:49:19.657 回答