セッションストレージを使用して1ページずつ質問を回答させるフォームの作成方法
カテゴリ：WEB制作
タグ：
1ページずつ質問をさせて最後に結果を発表、もしくは確認画面を表示してフォーム送信させる。
主にアンケートページや診断ページなどで出会う場面が多い気がします。
今回はJavascriptで実装する『セッションストレージを使用して1ページずつ質問を回答させるフォームの作成方法』を紹介します。
コードの紹介
ページ1
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>名前の入力</title>
</head>
<body>
<h1>Question 1/3</h1>
<form id="nameForm">
<label for="name">あなたの名前は？</label>
<input type="text" id="name" name="name" required>
<input type="submit" value="次に進む">
</form>
<script>
// セッションストレージから名前を取得して、あればフォームに表示
window.onload = function() {
const storedName = sessionStorage.getItem('name');
if (storedName) {
document.getElementById('name').value = storedName;
}
};
document.getElementById('nameForm').addEventListener('submit', function(event) {
event.preventDefault();
const name = document.getElementById('name').value;
if (name === '') {
alert('名前が入力されていません');
} else {
sessionStorage.setItem('name', name);
window.location.href = 'question_2.html'; // 2ページ目に移動
}
});
</script>
</body>
</html>
ページ2
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>年齢の入力</title>
</head>
<body>
<h1>Question 2/3</h1>
<form id="ageForm">
<label for="age">あなたの年齢は？</label>
<select id="age" name="age" required>
<option value="">選択してください</option>
</select>
<input type="button" value="前に戻る" onclick="window.location.href='question_1.html'">
<input type="submit" value="次に進む">
</form>
<script>
// 年齢の選択肢を追加
const ageSelect = document.getElementById('age');
for (let i = 10; i <= 100; i++) {
const option = document.createElement('option');
option.value = i;
option.text = i;
ageSelect.appendChild(option);
}
// セッションストレージから年齢を取得して、あれば選択
window.onload = function() {
const storedAge = sessionStorage.getItem('age');
if (storedAge) {
ageSelect.value = storedAge;
}
};
document.getElementById('ageForm').addEventListener('submit', function(event) {
event.preventDefault();
const age = document.getElementById('age').value;
if (age === '') {
alert('年齢が選択されていません');
} else {
sessionStorage.setItem('age', age);
window.location.href = 'question_3.html'; // 3ページ目に移動
}
});
</script>
</body>
</html>
ページ3
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>性別の選択</title>
</head>
<body>
<h1>Question 3/3</h1>
<form id="genderForm">
<label>あなたの性別は？</label><br>
<input type="radio" id="male" name="gender" value="男性">
<label for="male">男性</label><br>
<input type="radio" id="female" name="gender" value="女性">
<label for="female">女性</label><br>
<input type="button" value="前に戻る" onclick="window.location.href='question_2.html'">
<input type="submit" value="結果を見る">
</form>
<script>
// セッションストレージから性別を取得して、あれば選択
window.onload = function() {
const storedGender = sessionStorage.getItem('gender');
if (storedGender) {
document.querySelector(`input[name="gender"][value="${storedGender}"]`).checked = true;
}
};
document.getElementById('genderForm').addEventListener('submit', function(event) {
event.preventDefault();
const gender = document.querySelector('input[name="gender"]:checked').value;
sessionStorage.setItem('gender', gender);
window.location.href = 'result.html'; // 結果表示ページに移動
});
</script>
</body>
</html>
結果を表示するページ
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>結果の確認</title>
</head>
<body>
<h2>入力結果の確認</h2>
<table>
<tr>
<th>あなたの名前は？</th>
<td id="resultName"></td>
</tr>
<tr>
<th>あなたの年齢は？</th>
<td id="resultAge"></td>
</tr>
<tr>
<th>あなたの性別は？</th>
<td id="resultGender"></td>
</tr>
</table>
<script>
// セッションストレージからデータを取得して表示
document.getElementById('resultName').textContent = sessionStorage.getItem('name');
document.getElementById('resultAge').textContent = sessionStorage.getItem('age');
document.getElementById('resultGender').textContent = sessionStorage.getItem('gender');
</script>
</body>
</html>
コードを解説
入力フォームについて
HTMLのフォームのパーツにはIDが振ってあります。
このID名でセッションストレージに値を格納していきます。
まず、ページのロードが完了したタイミングで該当ページの入力フォームに値があるかどうかをチェックして、値がある場合は入力フォームにセットします。
これはフォームを進めていく中でページを戻ったときに値が空にならないようにするためです。
セッションストレージからのデータの取得は『sessionStorage.getItem(‘name’);』を使用します。
値があるかどうかをチェックして値がある場合は『document.getElementById(‘name’).value』で入力フォームに値をセットします。
例えば名前の入力ページでは以下のようになります。
window.onload = function() {
const storedName = sessionStorage.getItem('name');
if (storedName) {
document.getElementById('name').value = storedName;
}
};
ラジオボタンの際は『document.querySelector(`input[name=”gender”][value=”${storedGender}”]`).checked』を使用ます。この辺りはコードの紹介を参考にしてください。
入力画面を進む際には『submit』ボタンをトリガーにして実行します。
document.getElementById('nameForm').addEventListener('submit', function(event) {});
この中に処理を書いていきます。
submitした際に値があるかどうかをチェックするため以下でフォーム送信のイベントをキャンセルします。
event.preventDefault();
IDから入力フォームに値があるかどうかをチェックします。
値が無ければアラートなどの処理、値があれば『sessionStorage.setItem(‘name’, name);』でセッションストレージに保存します。
その後、『window.location.href』で次のページに移動させます。
event.preventDefault();
const name = document.getElementById('name').value;
if (name === '') {
alert('名前が入力されていません');
} else {
sessionStorage.setItem('name', name);
window.location.href = 'question_2.html'; // 2ページ目に移動
}
入力フォームの移動はこれの繰り返しになります。
結果を表示するページ
結果の表示は簡単でセッションストレージからID名を指定して取り出し、値をセットするだけです。
// セッションストレージからデータを取得して表示
document.getElementById('resultName').textContent = sessionStorage.getItem('name');
document.getElementById('resultAge').textContent = sessionStorage.getItem('age');
document.getElementById('resultGender').textContent = sessionStorage.getItem('gender');
デモでは結果の表示のみですが入力フォームに『document.getElementById(‘○○○’).value』でセットして送信させればメールフォームとしても使用できます。
まとめ
以上、『セッションストレージを使用して1ページずつ質問を回答させるフォームの作成方法』でした。
導入はとても簡単ですのでアンケートや診断フォームなどの制作の際はぜひ、参考にしてください。
