フォームの値の取得 - Javascript

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>sample</title>
  <script src="script.js"></script>
</head>
<body>
  <form action="" name="myform">
    <p>性別
      <label><input type="radio" name="gender" id="" value="男" checked>男</label>
      <label><input type="radio" name="gender" id="" value="女">女</label>
    </p>
    <p><input id="btn" type="button" value="button"></p>
  </form>
</body>
</html>

script.js

window.onload = function(){
  let btn = document.getElementById('btn');

  btn.addEventListener('click', function(){
    let gender = document.getElementsByName('gender');
    console.log(gender); // NodeList(2) [input, input]

    for(let i = 0; i < gender.length; i++){
      if(gender[i].checked){
        const radioValue = gender[i].value;
        console.log(radioValue);
      };
    };
  });
};

1つのチェックボックスの値の取得 - id 属性指定

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <script src="script.js"></script>
  <title>sample</title>
</head>
<body>
  <h1>sample</h1>
  <form action="">
    <p><input type="checkbox" name="" id="auto">auto</p>
  </form>
  <button type="button" id="btn">button</button>
</body>
</html>

script.js

window.onload = function(){
  let btn = document.getElementById("btn");
  let auto = document.getElementById("auto");
  btn.addEventListener('click', function(){
    console.log(auto.checked)
  })
}

チェックボックスの値の取得

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>sample</title>
  <script src="script.js"></script>
</head>
<body>
  <form action="" name="myform">
    <p>
      <label><input type="checkbox" name="os" value="iOS">iOS</label>
      <label><input type="checkbox" name="os" value="android">Android</label>
      <label><input type="checkbox" name="os" value="win">Windows</label>
      <label><input type="checkbox" name="os" value="mac">Mac</label>
    </p>
    <p><input id="btn" type="button" value="button"></p>
  </form>
</body>
</html>

script.js

window.onload = function(){
  const btn = document.getElementById('btn');

  btn.addEventListener('click', function(){
    const os = document.getElementsByName('os');
    let chkbox = "";

    for(let i = 0; i < os.length; i++){
      if(os[i].checked) {
        chkbox += os[i].value + ",";
      }
    };
    let pattern = /,$/;
    console.log(chkbox.replace(pattern, ''));
  });
};

セレクトボックスの値の取得

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>sample</title>
  <script src="script.js"></script>
</head>
<body>
  <form action="" name="myform">
    <p>
      <select name="address" id="address">
        <option value="">選択してください</option>
        <option value="東京">東京</option>
        <option value="大阪">大阪</option>
        <option value="福岡">福岡</option>
      </select>
    </p>
    <p><input id="btn" type="button" value="button"></p>
  </form>
</body>
</html>

script.js

window.onload = function(){
  let btn = document.getElementById('btn');

  btn.addEventListener('click', function(){
    let address = document.getElementById("address");
    let idx = address.selectedIndex;
    let seltxt = address.options[idx].value;
    console.log(seltxt);
  });
};

スライダーの値を取得

input イベントは操作中に値を取得します。change イベントでも値を取得できますが、change イベントの場合は操作が止まった時に値を取得します。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>sample</title>
  <script src="script.js"></script>
</head>
<body>
  <p><input type="range" min="0" max="100" id="bar"></p>
</body>
</html>

script.js

window.onload = function(){
  let bar = document.getElementById("bar");
  bar.addEventListener("input", function(){
    console.log(this.value);
  });
};