woshidan's blog

あいとゆうきとITと、とっておきの話。

Javascriptで入力フォームの値を取得する

アカウントの登録画面で次の画面へ値を送る前に正常な入力が行われているか

チェックする機能をつくるためにFormオブジェクトについて少し調べました。

 

var form = document.forms[参照番号]

(参照番号=同一の要素が、htmlに記載されている順に0,1,2...と割り当てれらる番号)

のようにFormオブジェクトを取得して、

form.elements[参照番号]

とすることで、入力フォームに入力された文字列などを取得できます。

 

なお、formは送信先や送信方法がセットになった方法のことであり、

いわゆる名前などを入力するフォームはformの要素であるので注意……が必要な残念なド素人はわたしだけかもしれませんが←

 

html中で最初にあるフォームの最初の要素の値を得たいときは

○document.forms[0].elements[0].value

×document.forms[0].value

×の方で、document.forms[0]を使うとそのform要素の送信先とかを調べたり、

送信ボタンがいくつかあって、ボタンごとにactionの値を変更するJavascriptとひもづけておいてデータの送信先phpを変えたりといったのには使える気がしましたが今回の目的はそこではありませんのでパス。

 

また、自分が最初に試したとき、form要素自体に特にvalueを設定してなかったので

TypeError: Cannot read property 'value' of undefined

が表示されてたので備忘録として書いておきます。

 

valueのところをnameにするとフォームの名前が、typeだとフォームの形式が取得できます。

また、[参照番号]のところを

form.elements["id名"]

のように変えてid名で要素を取得することも出来ます。

 

また、id名の指定がなされている要素であれば

DOMで(と参考にしてる本に書いてあるからメモがてらこう書いてますが←)

document.getElementById("id名")

でも要素を取得することが出来ます。