[JavaScript] フォーム部品に値をセットする(まとめ)

前回に引き続きフォーム部品のまとめです。今回はプログラム側から値をセットしたり選択状態をコントロールするお話です。

前回のフォームに入力された値を取得したいという方は以下をどうぞ。 blog.katsubemakito.net

テキストボックス

getElementByIdquerySelectorなどで取得したオブジェクトのvalueプロパティに値を代入するだけです。

<form>
  <input type="text" id="foo">
  <input type="text" name="bar">
</form>

<script>
window.addEventListener('load', ()=>{
  document.getElementById('foo').value = 'foo';
  document.querySelector('input[type=text][name=bar]').value = 'bar';
})
</script>

以下のフォーム部品も同じ要領でセットできます。

  1. パスワード (<inputy type="password">)
  2. 隠しフィールド (<inputy type="hidden">)
  3. テキストエリア (<textarea>)

プルダウン(ドロップダウン)

選択する(単一)

プルダウンの項目を選択するにはテキストボックスと同様にvalueプロパティに指定するだけです。

<form>
  <select id="fruits">
    <option value="apple">りんご</option>
    <option value="banana">バナナ</option>
    <option value="orange">オレンジ</option>
  </select>
</form>

<script>
window.addEventListener('load', ()=>{
  // バナナを選択する
  document.getElementById('fruits').value = 'banana';
})
</script>

選択する(複数)

複数選択する場合も同様です。数がある場合はループなどで回しながらセットします。

<form>
  <select id="fruits" size="3" multiple>
    <option value="apple">りんご</option>
    <option value="banana">バナナ</option>
    <option value="orange">オレンジ</option>
  </select>
</form>

<script>
window.addEventListener('load', ()=>{
  // りんごとオレンジを選択する
  document.querySelector('#fruits option[value=apple]').selected = true;
  document.querySelector('#fruits option[value=orange]').selected = true;
})
</script>

追加する

選択肢を増やしてみます。select要素にaddinsertBeforeメソッドでoption要素を追加してやります。

<form>
  <select id="fruits">
    <option value="apple">りんご</option>
    <option value="banana">バナナ</option>
    <option value="orange">オレンジ</option>
  </select>
</form>

<script>
window.addEventListener('load', ()=>{
  const fruits = document.getElementById('fruits');

  // 最後に追加する
  fruits.add(new Option('みかん', 'mikan'));

  // 先頭に追加する
  fruits.insertBefore(new Option('もも', 'peach'), fruits.firstChild);

  // りんごの後ろに追加する
  fruits.insertBefore(new Option('ぶどう', 'grape'), fruits.children[2]);
})
</script>

createElementを使う方法でも同様に動きます

const option = document.createElement('option');
option.value = 'peach';
option.text = 'もも';
fruits.insertBefore(option, fruits.firstChild);

チェックボックス

ここではチェックボックスの選択状態をコントロールします。

選択する(単一)

チェックボックスvalueには選択されたときの値が入っていますので、選択情報を指定するのはcheckedプロパティです。

<form>
  <input type="checkbox" name="terms" id="terms" value="1"><label for="terms">利用規約に同意</label>
</form>

<script>
window.addEventListener('load', ()=>{
  document.getElementById('terms').checked = true
})
</script>

選択する(複数)

複数同時に入れたい場合も同様です。

<form>
  <input type="checkbox" name="fruits" id="fruits1" value="apple"><label for="fruits1">りんご</label>
  <input type="checkbox" name="fruits" id="fruits2" value="banana"><label for="fruits2">バナナ</label>
  <input type="checkbox" name="fruits" id="fruits3" value="orange"><label for="fruits3">オレンジ</label>
</form>

<script>
window.addEventListener('load', ()=>{
  // りんごとオレンジにチェックを入れる
  document.getElementById('fruits1').checked = true;
  document.getElementById('fruits3').checked = true;
})
</script>

ラジオボタン

チェックボックスと同様にvalueには選択されたときの値が入っていますのでcheckedプロパティで選択状態をコントロールします。

<form>
  <input type="radio" name="hardness" id="hardness1" value="1"><label for="hardness1">かため</label>
  <input type="radio" name="hardness" id="hardness2" value="2"><label for="hardness2">普通</label>
  <input type="radio" name="hardness" id="hardness3" value="3"><label for="hardness3">やわらかめ</label>
</form>

<script>
window.addEventListener('load', ()=>{
  // やわらかめを選択する
  document.querySelector('#hardness3').checked = true;
})
</script>

ファイル(設定できません)

ファイルのvalueJavaScriptから設定できません。以下のコードで動きそうな気がしますが、実際には例外が発生します。

<form>
  <input type="file" id="avatar">
</form>

<script>
window.addEventListener('load', ()=>{
  document.getElementById('avatar').value = 'foo.png';
});
</script>

「プロパティの設定に失敗した。プログラムからは空文字列(value='')しか受け付けない」といった内容のエラーメッセージが出力されます。

Uncaught DOMException: Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string.

参考ページ