ajaxを使用してJavaScriptでフォームを操作する方法

今回は、JavaScriptajaxを使用してフォームを操作する方法と、ajaxを使用してJavaScriptでフォームを操作する場合の注意事項について、実際の事例を紹介します。

フォーム自体も DOM ツリーであるため、JavaScript を使用したフォームの操作は DOM の操作に似ています。

ただし、フォームの入力ボックスやドロップダウンボックスなどはユーザーの入力を受け付けることができるため、JavaScriptを使用してフォームを操作することでユーザーが入力した内容を取得したり、入力ボックスに新たな内容を設定したりすることができます。

HTML フォーム の入力コントロールには、主に次のタイプが含まれます:

• テキスト ボックス、対応する 、テキストを入力するために使用されます。パスワード ボックス、 に対応し、パスワードを入力するために使用されます

• ラジオ ボタン ボックス、対応する は、項目を選択するために使用されます。

  

  チェックボックス
、に対応、複数の項目を選択するために使用されます。
ドロップダウン ボックス、対応する、1つの項目を選択するために使用されます。  に対応する隠しテキストはユーザーには表示されませんが、フォームの送信時に隠しテキストがサーバーに送信されます。
値を取得します
ノードへの参照を取得した場合、value を直接呼び出して、対応するユーザー入力値を取得できます:

• // <input>
  var input = document.getElementById('email');
  input.value; // '用户输入的值'

  このメソッドはテキストに適用できます。パスワード、非表示を選択します。ただし、ラジオ ボタンとチェック ボックスの場合、value 属性は常に HTML のプリセット値を返します。実際に取得する必要があるのは、ユーザーがオプションを「チェック」したかどうかなので、checked を使用して判断する必要があります:

  // <label><input> Monday</label>
  // <label><input> Tuesday</label>
  var mon = document.getElementById('monday');
  var tue = document.getElementById('tuesday');
  mon.value; // '1'
  tue.value; // '2'
  mon.checked; // true或者false
  tue.checked; // true或者false

値の設定 値の設定は、テキスト、パスワード、非表示、選択の場合は、値を直接設定するだけです:

// <input>
var input = document.getElementById('email');
input.value = 'test@example.com'; // 文本框的内容已更新

ラジオ ボタンとチェック ボックスの場合は、checked を true または false に設定するだけです。 。

HTML5 コントロールHTML5 では、多数の標準コントロールが追加されており、一般的に使用されるコントロールには、日付、日時、日時ローカル、色などが含まれます。それらはすべて タグを使用します。 HTML5 をサポートしていない新しいコントロールは認識されず、type="text" として表示されます。 HTML5 をサポートするブラウザは、フォーマットされた文字列を取得します。たとえば、type="date" の入力値は、YYYY-MM-DD 形式の有効な日付、または空の文字列であることが保証されます。

フォームを送信する

最後に、JavaScript は 2 つの方法でフォームの送信を処理できます (AJAX メソッドは後で紹介します)。 方法 1 は、 要素の submit() メソッドを通じてフォームを送信することです。

<input>
<input>
<input>

の欠点は、この方法は、ブラウザがフォームを正常に送信することを妨げます。デフォルトでは、ブラウザは をクリックするか、ユーザーが最後の入力ボックスで Enter キーを押すとフォームを送信します。したがって、2 番目の方法は、

自体の onsubmit イベントに応答し、フォームを送信するときに変更を加える方法です。

<!-- HTML -->

     Submit

<script> function doSubmitForm() { var form = document.getElementById(&#39;test-form&#39;); // 可以在此修改form的input... // 提交form: form.submit(); } </script>

false を返した場合、ブラウザは送信を続行するように true を返す必要があることに注意してください。フォームの送信は続行されません。この状況は通常、ユーザー入力エラーに相当し、ユーザーに

エラー メッセージ

が表示され、フォームの送信が終了します。 を確認・変更する際はを活用してデータを渡してください。 たとえば、多くのログイン フォームではユーザーがユーザー名とパスワードを入力することが求められますが、セキュリティ上の理由から、フォームを送信するときにクリア テキストのパスワードは送信されず、パスワードの MD5 が送信されます。通常の JavaScript 開発者は、 を直接変更します:

<!-- HTML -->

     Submit

<script> function checkForm() { var form = document.getElementById(&#39;test-form&#39;); // 可以在此修改form的input... // 继续下一步: return true; } </script>

このアプローチは問題ないようですが、ユーザーがパスワードを入力して送信すると、パスワード ボックスの表示が突然、数 * から 32 * に変わります (MD5 には32文字）。

要想不改变用户的输入，可以利用实现：

<!-- HTML -->

           Submit

<script> function checkForm() { var input_pwd = document.getElementById(&#39;input-password&#39;); var md5_pwd = document.getElementById(&#39;md5-password&#39;); // 把用户输入的明文变为MD5: md5_pwd.value = toMD5(input_pwd.value); // 继续下一步: return true; } </script>

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

用history让ajax支持前进/后退/刷新

原生ajax与封装的ajax使用方法（附代码）

以上がajaxを使用してJavaScriptでフォームを操作する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。