Javascriptでフォームを操作する際にver.2ではどのように行えば良いのか、という質問を多くいただいておりました。
本記事ではformタグにIDなどの属性を付与せずに「次へ」ボタンのイベントを取得する方法を紹介します。
設定の際の参考になれば幸いです。
document.formsプロパティ
formsプロパティを利用することで、HTML内のformタグをすべて取得することができます。
このプロパティはformタグの操作や参照に利用することが可能です。
特定のformタグを操作したい場合はインデックスを指定するようにしてください。
HTML内にformタグが１つしかない場合は、
送信する前にデータを操作するなど、submitの直前にJavascriptでの操作を行うことが可能です。
また、フォーム内の要素を取得することに利用することもできます。
nameで指定することもできますので、特定のinputの値を操作することが可能です。
id属性やname属性がないformタグを操作できるため、HTMLソース編集なしで利用できる点が便利です。
特にver.2では、formタグへの属性付与ができませんので、こちらの方法での実装を試してみてください。
このプロパティはformタグの操作や参照に利用することが可能です。
利用方法
「form"s"」と複数系になっているように、すべてのformタグを取得するプロパティです。特定のformタグを操作したい場合はインデックスを指定するようにしてください。
Javascript
document.forms[index] // 1つ目のformタグ document.forms[0]
forms[0]で取得が可能です。
利用例
フォーム送信前に何らかの操作を行いたい場合に利用することができます。送信する前にデータを操作するなど、submitの直前にJavascriptでの操作を行うことが可能です。
Javascript
document.forms[0].onsubmit = function() {
// 送信前の処理を記載
};
また、フォーム内の要素を取得することに利用することもできます。
nameで指定することもできますので、特定のinputの値を操作することが可能です。
Javascript
document.forms[0].elements[index] // 特定のinputの値を操作する例 document.forms[0].elements['f01'].value = "test";
id属性やname属性がないformタグを操作できるため、HTMLソース編集なしで利用できる点が便利です。
特にver.2では、formタグへの属性付与ができませんので、こちらの方法での実装を試してみてください。
最後に
設定後は動作確認を必ず行い、動作に問題がないか確認をしてください。
不具合やほかのやり方が知りたい等あれば、下記の「コンテンツに関しての要望はこちら」からご連絡ください。
不具合やほかのやり方が知りたい等あれば、下記の「コンテンツに関しての要望はこちら」からご連絡ください。
