エンジニア目指すほしこのブログ

エンジニアめざすほしこが学んだことや考えていることをアウトプットするブログです。現在27歳、小売業従事者。『アマゾンエフェクト!: 「究極の顧客戦略」に日本企業はどう立ち向かうか』著者: 鈴木 康弘 を読んでプログラミングに興味を持ちました。

入力したフォームの中身を空にする方法(jQuery、ajax)

グループチャットのようなアプリケーションにてajaxでコメントを投稿できるように実装しました。フォームにコメントを入力して送信した際に、デフォルトでは入力した内容がフォームの中に残ったままです。このフォームを空にするところが難しかったので今後のためにまとめておきます。

 

フォームを空にする方法は2種類ある。

①valメソッドを使う

②resetメソッドを使う

 

以下それぞれの説明。

①valメソッドを使う

 valメソッドはvalueの値を取得したり、変更したりできるメソッド。

 値を変更する場合は、$('対象要素').val('変更後の値')と記述すればOKなので、

 .val('')とすれば値は空になる。

 → $('フォームの要素'),val('') これでフォームを空にできる

 

②resetメソッドを使う

 resetメソッドは初期値に戻すメソッドなので、

 $('対象要素').reset( )とすればフォームは空になる。

 ※注意すべきポイント1

  $('対象要素')[0].reset( )のように[0]をつける

 ※注意すべきポイント2

  ここでの対象要素はフォーム全体になる

  (valはinputの要素でOK、resetはフォーム全体の要素にする)

 

 

val('')でできたのにresetに書き換えたら動かなくなったのはメソッドを使う要素が間違っていたからでした。