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

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

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

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

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

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

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

  

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

• // <input type="text" id="email">
  var input = document.getElementById('email');
  input.value; // '用户输入的值'<p style="text-align: left;">このメソッドはテキストに適用できます。パスワード、非表示を選択します。ただし、ラジオ ボタンとチェック ボックスの場合、value 属性は常に HTML のプリセット値を返します。実際に取得する必要があるのは、ユーザーがオプションを「チェック」したかどうかなので、checked を使用して判断する必要があります: </p>
  </ul>
  <pre class="brush:php;toolbar:false">// <label><input type="radio" name="weekday" id="monday" value="1"> Monday</label>
  // <label><input type="radio" name="weekday" id="tuesday" value="2"> 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 type="text" id="email">
  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 type="date" value="2015-07-01">
  <input type="datetime-local" value="2015-07-01T02:03:04">
  <input type="color" value="#ff0000">

  ログイン後にコピー

  の欠点は、この方法は、ブラウザがフォームを正常に送信することを妨げます。デフォルトでは、ブラウザは

  をクリックするか、ユーザーが最後の入力ボックスで Enter キーを押すとフォームを送信します。したがって、2 番目の方法は、

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

  <!-- HTML -->
  <form id="test-form">
    <input type="text" name="test">
    <button type="button" onclick="doSubmitForm()">Submit</button>
  </form>
  <script>
  function doSubmitForm() {
    var form = document.getElementById('test-form');
    // 可以在此修改form的input...
    // 提交form:
    form.submit();
  }
  </script>

  ログイン後にコピー

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

  エラー メッセージ

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

  <!-- HTML -->
  <form id="test-form" onsubmit="return checkForm()">
    <input type="text" name="test">
    <button type="submit">Submit</button>
  </form>
  <script>
  function checkForm() {
    var form = document.getElementById('test-form');
    // 可以在此修改form的input...
    // 继续下一步:
    return true;
  }
  </script>

  ログイン後にコピー

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

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

  <!-- HTML -->
  <form id="login-form" method="post" onsubmit="return checkForm()">
    <input type="text" id="username" name="username">
    <input type="password" id="input-password">
    <input type="hidden" id="md5-password" name="password">
    <button type="submit">Submit</button>
  </form>
  <script>
  function checkForm() {
    var input_pwd = document.getElementById('input-password');
    var md5_pwd = document.getElementById('md5-password');
    // 把用户输入的明文变为MD5:
    md5_pwd.value = toMD5(input_pwd.value);
    // 继续下一步:
    return true;
  }
  </script>

  ログイン後にコピー

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

  推荐阅读：

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

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

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