JavaScript
フォーム
ブックマークレット
開発者ツール

jsを使ってフォームに入力してみました


はじめに

最近業務でフォーム入力を繰り返すことがあり、何度も入力するのが面倒臭くなってきました。

jsまったく書いたことがなかったので、この機会に簡単なjsを書けるようになりたいと思い、書き方を調べました。

やっと書けたのでメモをします。


フォームの構造の前提

フォームの作りとして、id属性はなくname属性のみでした。

selectタグは初期値がない状態でした。

name属性を取得して、そのvalueを書き換えればいいので、こう書いてみました。

document.getElementsByTagName("属性")['値'].value = "入力したい文字";

document.getElementsByName("値")[0].value = "入力したい文字";

属性とは、例えばname属性ならnameと書き、値とはそのname属性の値です。

以下、タグごとに例を載せます。


inputタグのvalueの書き換え方

document.getElementsByTagName("input")['name'].value = "山田 太郎";

document.getElementsByName("name")[0].value = "山田 太郎";


selectタグのvalueの書き換え方

// (初期状態で何もセレクトされていない場合)

// 生年月日を入力するフォームで、valueに1~12が指定されていたので、今回は12としています。
document.getElementsByTagName("select")['month'].value = "12";
document.getElementsByName("month")[0].value = "12";

// (初期状態で何かしらセレクトされている場合)
document.getElementsByTagName("select")['blood'][1].selected = true;

trueにするとチェックされ、falseにすればチェックが外されました。


textareaタグのvalueの書き換え方

document.getElementsByTagName("textarea")['comments'].value = "スプラトゥーン始めてみました。パブロが好きです。";

document.getElementsByName("comments")[0].value = "びちゃびちゃしないで・・・";


ラジオボタンとチェックボックスも自動でチェックしてみたい

document.getElementsByName("属性")[配列番号].checked = true;

以下例

document.getElementsByName("hobby")[0].checked = true;

セレクトタグの例同様、trueにするとチェックされ、falseにすればチェックが外されました。


備考

http://www.htmq.com/html5/form.shtml

HTMLクイックカンファレンスのページを例としてコンソールに打ち込んでみてください。


終わり

テストを簡単にすることができてよかったです。。。

ブックマークレットに登録しておこうと思います。

使い方は、ブックマークレットのURLに以下を記述して保存すれば良いです。

javascript:(function(){/*ここにjsを記入。*/})();

書けてよかった・・・。

以上、jsを使ってフォームに入力してみました、でした。

(これってjsですよね(今更))