*

フォームの部品の値を取得したり変更する命令

公開日: : 最終更新日:2015/08/03 jQuery

フォームを操作する専用の命令がval()です。
この命令を使用すると、フォームに入力または、選択されている
value属性の値を取得・変更することが可能です。

value属性の値を取得する

val()は括弧内には、何も書かずに使用すると、フォームに入力
されているテキストや選択されている値を取得します。

値を取得する対象要素はセレクターで指定します。

サンプルコードの確認ボタン(button要素)をクリックすると、
input要素の値を取得して「input要素に入力された内容」に
メールを送信!という確認メッセージをp要素内に書き出します。

それと同時にbutton要素の「確認」から「送信」に変更しています。

val()要素はinput要素だけではなく、
select/option要素やtextarea要素にも使用できます。

「$(“select”).val();」と指定すると、選択されている
option要素のvalue属性の値を取得することができます。

「$(“texrarea”).val();」と書けば、入力されている
テキストを取得することができます。

value属性の値を変更する

フォームの内容を変更するときも、val()を使用します。
対象とする要素をセレクターで指定し、変更したい値を
括弧内に記述します。

サンプルコードでは、クリアボタン(button要素)がクリックされたら、
val(“”)を実行し、input要素の値を空にしています。

実行結果はこちらです。

スポンサードリンク

関連記事

jQuery

Masonryのギャラリーの画像をクリックすると、画像が拡大し、キャプションがでるようにしてみる

前回の記事でMasonryのギャラリーを作成しましたが、今回はそれに、見出しをつけてみます。 サン

記事を読む

catejQuery

親要素を取り除いたり、要素を削除する。

前回は要素を包む命令を取り上げました。 今回はその逆、親要素を取り除いたり、 要素を置き換えたり

記事を読む

catejQuery

表示中の要素を非表示にする hide()

hide()は、show()の逆の命令です。 表示されている状態(display:block)のH

記事を読む

catejQuery

イベント発生時に一度だけ処理を行うone()

この命令は、指定した要素で発生したイベントに対して、 一度だけ実行する処理を設定します。 o

記事を読む

catejQuery

クリックしたことを感知するclick()

click()命令はready()と同様に、括弧内のfunction(){...}と記述し その内

記事を読む

catejQuery

テキストの取得・変更

HTMLファイルに含まれるテキストをjQueryで 取得・変更するには、text()という命令を使

記事を読む

catejQuery

対象の要素を絞ってイベントを登録する

今回紹介するon()は、 これまでの記事で紹介したイベントを別の書き方で 設定できるメソッドです

記事を読む

catejQuery

属性値の変更・取得・削除、要素の置き換え

jQueryはHTMLの要素だけではなく、属性に設定されている値を 変更したり、取得出来たりします

記事を読む

jQuery

jQueryで表示・非表示サイドバーを作ってみる

今回の内容は、クリック操作によってWebページの左側に格納できるサイドバーを作成します。サンプルコー

記事を読む

catejQuery

設定されたイベント処理を消す

設定されているイベント処理を取り消すには off()命令を使います。 $( セレクター ).

記事を読む

スポンサードリンク

Message

メールアドレスが公開されることはありません。

CAPTCHA


次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">



スポンサードリンク

jQueryMobile
トグルスイッチを設定する

トグルスイッチ(toggle switch)とは、〇型のつまみを左右に

jQueryMobile
項目選択の複数ウィジェットをグループ化する

年月日など、複数のリストから同時に選択したいとき、ウィジェットのグルー

jQueryMobile
<select>により項目選択

ボタンによる選択では、1つの項目だけ選択するか、複数を同時に選択するか

jQueryMobile
値を選択するボタンを表示する

値を選択するボタンは以下の2つがあります。 ・複数の値から1つだ

jQueryMobile
ボタンを設定する

前回の記事では<a data-role="button">

→もっと見る

  • スポンサーリンク

PAGE TOP ↑