0

innerHTML を使用してテキストを設定する JavaScript フォームがあります。

フォームが送信されると、その情報は失われます.とにかく「スティッキー」にすることができます.クッキーを考えていましたが、それが私が知っているすべてです.

ありがとう

<form "action="" name="myform">
<input type="text" name='name">
<div id="theName"></div>
</form>

簡単な例 名前をキャプチャしており、フォームの送信後に名前を表示するには div が必要です。

4

3 に答える 3

3

何らかの方法でデータを永続化する必要があります。いくつかのオプションがあります:

  • サーバーに保存します。フォームが送信されると、サーバー側のスクリプトがデータを受け取ります。データベース、セッション変数、またはアプリケーションに適したその他の形式のストレージに永続化できます。クライアントがフォームを含むページに再度アクセスするたびに、永続化されたデータを使用してフォームの HTML をサーバーに生成させます。
  • HTML5 のローカル ストレージを使用します。従来のブラウザーではサポートされていませんが、最新のブラウザーはすべてローカル ストレージ API を提供します。ユーザーがフォームを送信すると (フォームの「送信」イベントにイベント リスナーをアタッチする)、 を呼び出してlocalStorage[key] = value取得することにより、フォーム データを保存できますlocalStorage[key]。
  • クッキーに保存します。この方法はお勧めしませんが、フォーム データで Cookie を作成できます。唯一の制限は、データを文字列として表す必要があることですが、JSONをお勧めします。ただし、リクエストごとに Cookie がサーバーに送信されるため、おそらくこの方法は使用しないでください。フォーム フィールドに大量のデータが含まれている場合は、不必要に大量のデータをサーバーに送信していることにもなります。

HTML5 のローカル ストレージを使用すると、サーバー側の構成を必要としない自己カプセル化アプローチが得られます。

<form action="" name="myform">
  <input type="text" name="name">
  <div id="theName"></div>
</form>
<script type="text/javascript">
  (function() {
    var form = document.getElementsByName('myform')[0];
    if (localStorage['name'] !== undefined) {
      var displayArea = document.getElementById('theName');
      displayArea.textContent = localStorage['name'];
    }
    form.addEventListener('submit', function() {
      var nameField = document.getElementsByName('name')[0];
      localStorage['name'] = nameField.value;
    }, false);
  })();
</script>
于 2011-01-19T06:26:16.720 に答える
2

入力タグの「値」属性を何かまたは空白に設定していますか? 最後の値セットが使用されるように、単に削除 (属性自体を削除) することができます (パスワード以外のタイプの入力に対してのみ当てはまります。また、すべてのブラウザーで試したわけではありません)。

または、(PHP、ASP、RUBY などの) サーバーサイド スクリプトを使用して、以前に送信された属性値を設定することもできます。

<form method="post">
<input type="text" name="txtinput" id="txtinput" value="<?php echo $_POST['txtinput']?>"/>
<input type="submit" value="submit">
</form>

js のみで行うのは、Cookie を使用するため、はるかに複雑で信頼性が低くなります。

PS: XHR (AJAX) を使用してフォームを送信しないと仮定しています。XHR はページを更新したり、入力を再初期化したりしないためです。

于 2011-01-19T06:23:25.397 に答える
0

これはサーバー側で発生するはずです。Javascript はページを拡張するためのものであり、データ操作に依存するものではありません。

PHP に変換されたスクリプトは、次のようになります。

<form action="" method="post" name="myform">
  <input type="text" name='name">
  <div id="theName"><?php
    if(isset($_POST['name'])) { echo $_POST['name']; }
  ?></div>
</form>

...そして、JS を呼び出さなくても、毎回動作します。

いずれにせよ、フォーム データを何らかの方法で処理する必要があります。サーバー側のスクリプトを使用せずに、どのようにデータを取得するつもりでしたか?

于 2011-01-19T06:38:47.323 に答える