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

プログラミング

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

実際のコード

<!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の警告を表示する事が出来ます。

タイトルとURLをコピーしました