フォームボタンをクリックしたときにJavaScriptでページ遷移させる

onclickとlocation.hrefを使って、ボタンをクリックしたときに別ページに遷移させます。

実際のコード
requiredで必須項目にしたいときの注意点
侍テラコヤならいつでもプログラミングの質問が可能

実際のコード

<!DOCTYPE html>
<html lang="ja">

<style>
  input {
    margin-bottom: 5px;
  }
</style>

<form>
  <label>ユーザー名：<input type="text" /></label><br>
  <label>パスワード：<input type="password" /></label><br>
  <input type="button" id="doLogin" value="ログイン" />
</form>

<script>
  document.getElementById("doLogin").onclick = function () {
    location.href = 'result.html';
  }
</script>
</html>

「result.html」の中身は以下です。

<p>ログインしました。</p>

すると、最初は以下の画面が表示されていて、

ログインボタンを押すと、以下のように表示されるページへと遷移します。

もしくは、<form>~</script>（10~20行目）のところを、以下のように記述する方法もあります。

<form>
  <label>ユーザー名：<input type="text" /></label><br>
  <label>パスワード：<input type="password" /></label><br>
  <input type="button" value="ログイン" onclick="location.href='result.html'" />
</form>

input type="button"をinput type="submit"にすることで、actionでも遷移先を指定できます。

<form action="result.html">
  <label>ユーザー名：<input type="text" /></label><br>
  <label>パスワード：<input type="password" /></label><br>
  <input type="submit" value="ログイン" />
</form>

requiredで必須項目にしたいときの注意点

requiredを使って必須項目にしたい場合は、input type="submit"を使う必要があります。

また、以下のようなコードだと、ユーザー名とパスワードを必須項目にしたい場合でも、requiredが実行される前にlocation.hrefによりページ遷移してしまうので、input requiredが効いていないように見えます。

<form>
  <label>ユーザー名：<input type="text" /></label><br>
  <label>パスワード：<input type="password" /></label><br>
  <input type="submit" id="doLogin" value="ログイン" />
</form>

<script>
  document.getElementById("doLogin").onclick = function () {
    location.href = 'result.html';
  }
</script>

この場合の対処法は、JavaScriptでフォームに入力された値が空欄であるかどうかを判定すればOKです。

以下のコードでは、ユーザー名かパスワードが空欄だった場合に、警告が表示されます。

<!DOCTYPE html>
<html lang="ja">

<style>
  input {
    margin-bottom: 5px;
  }
</style>

<form action="result.html">
  <label>ユーザー名：<input type="text" id="username" required /></label><br>
  <label>パスワード：<input type="password" id="password" required /></label><br>
  <input type="submit" id="doLogin" value="ログイン" onclick="return check();" />
</form>

<script>
  function check() {
    var username = document.getElementById("username").value;
    var password = document.getElementById("password").value;
    if (username === '' | password === '') {
      return true;
    }
    else {
      return false;
    }
  }
</script>
</html>

ユーザー名かパスワードが空欄だった場合にreturn true;にして、それ以外はreturn false;にすると画面遷移をしないでrequiredの警告を表示することができます。