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 に答える