Javascriptで制限時間付きフォームの作成方法

WEB制作、マーケティングに関する情報をお届けします。

Javascriptで制限時間付きフォームの作成方法

2024.08.06

カテゴリ：WEB制作

タグ：

JavaScript

最近でオンラインで資格取得や検定、テストなどが行える資格が増えてきました。そこで今回はJavascriptで制限時間付きフォームの作成する方法について紹介します。

デモを見る

コードの紹介

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>制限時間付きフォーム</title>
    <style>
        .form-container {
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 8px;
            background: #f9f9f9;
        }
        .timer {
            font-size: 20px;
            color: red;
        }
        .disabled {
            pointer-events: none;
            opacity: 0.6;
        }
    </style>
</head>
<body>
    <div class="form-container">
        <h1>制限時間付き入力フォーム</h1>
        <div class="timer" id="timer">残り時間: 120秒</div>
        <form id="restrictedForm">
            <label for="name">名前:</label>
            <input type="text" id="name" name="name" required>
            <br><br>
            <label for="email">メールアドレス:</label>
            <input type="email" id="email" name="email" required>
            <br><br>
            <button type="submit">送信</button>
        </form>
    </div>
</body>
</html>

Javascript

<script>
    // 設定する制限時間（秒）
    const limitTime = 120;
    let remainingTime = limitTime;

    // タイマー表示要素とフォーム要素の取得
    const timerElement = document.getElementById('timer');
    const formElement = document.getElementById('restrictedForm');

    // タイマーの更新と処理
    function updateTimer() {
        timerElement.textContent = `残り時間: ${remainingTime}秒`;
        if (remainingTime <= 0) {
            // タイムアウト時の処理
            timerElement.textContent = '時間切れです。フォームは無効化されました。';
            formElement.classList.add('disabled');
            clearInterval(timerInterval);
            // フォームの送信を無効化
            formElement.addEventListener('submit', (event) => {
                event.preventDefault();
                alert('時間切れです。');
            });
        }
        remainingTime--;
    }

    // タイマーを1秒ごとに更新
    const timerInterval = setInterval(updateTimer, 1000);

    // フォームの送信処理
    formElement.addEventListener('submit', (event) => {
        if (remainingTime > 0) {
            // 残り時間がある場合はフォームを送信
            alert('フォームが送信されました！');
        } else {
            // 残り時間がない場合は送信を防ぐ
            event.preventDefault();
            alert('時間切れです。');
        }
    });
</script>

コードの解説

HTMLの説明は割愛してJavascriptのみ解説していきます。

まず、変数に『const limitTime = 120;』で制限時間の秒数を指定します。次に『let remainingTime = limitTime;』で時間のカウントダウンを表示するための変数を作成します。時間を表示しない場合は不要です。

const limitTime = 120;
let remainingTime = limitTime;

以下で時間経過の表示先のIDと、対象になるフォームのIDを取得します。

const timerElement = document.getElementById('timer');
const formElement = document.getElementById('restrictedForm');

タイマー部分の処理を作成します。
『function updateTimer(){}』は『setInterval()』で1秒ごとに実行させています。
『remainingTime–』ではカウントダウンさせます。
『timerElement.textContent = `残り時間: ${remainingTime}秒`;』でテキストを出力します。
『if (remainingTime <= 0) {}』で時間経過を確認し0になった場合の処理を行います。
『timerElement.textContent = ‘時間切れです。フォームは無効化されました。’;』で制限時間が切れた際の出力を記載します。
『formElement.classList.add(‘disabled’);』ではformにクラス名をつけて、あらかじめ設定していたCSSを当ててクリックイベントを無効化します。
『clearInterval(timerInterval);』でタイマー関数である『setInterval() 』の処理を無効化します。
『formElement.addEventListener(‘submit’, (event) => {});』の中にフォームのsubmitボタンを無効化する処理を書いていきます。
『event.preventDefault();』でフォームを送信できなくしています。

function updateTimer() {
    timerElement.textContent = `残り時間: ${remainingTime}秒`;
    if (remainingTime <= 0) {
        // タイムアウト時の処理
        timerElement.textContent = '時間切れです。フォームは無効化されました。';
        formElement.classList.add('disabled');
        clearInterval(timerInterval);
        // フォームの送信を無効化
        formElement.addEventListener('submit', (event) => {
            event.preventDefault();
            alert('時間切れです。');
        });
    }
    remainingTime--;
}
// タイマーを1秒ごとに更新
const timerInterval = setInterval(updateTimer, 1000);

最後の送信時の処理を書いていきます。
残り時間を計算して残り時間があった場合には送信された際の処理、残り時間がない場合は時間切れの際の処理を書きます。

formElement.addEventListener('submit', (event) => {
    if (remainingTime > 0) {
        // 残り時間がある場合はフォームを送信
        alert('フォームが送信されました！');
    } else {
        // 残り時間がない場合は送信を防ぐ
        event.preventDefault();
        alert('時間切れです。');
    }
});