多分やってることが多いので、まずは一旦作り直して
ページA → ページB
の簡単な遷移にして、ページAにはチェックボックス1つだけでうまくいくかやってみたらどうでしょうか？
うまくいくなら2,3個と増やしていけば理解が早いと思います。
1Like
チェックボックスの値を保持したい
Q&A
画面遷移を繰り返してもチェックボックスのチェックが残ったままにするため、コードを見様見真似で書いているのですがうまくいきません。ご教示いただけたら幸いです。
該当するソースコード js
window.onload = function onLoad() {
//コース選択済み表示
const date = document.getElementsByName("course");
if(sessionStorage.getItem('A') ==="true"){
date[0].checked=true;
}
if(sessionStorage.getItem('B') ==="true"){
date[1].checked=true;
}
if(sessionStorage.getItem('C') ==="true"){
date[2].checked=true;
}
if(sessionStorage.getItem('D') ==="true"){
date[3].checked=true;
}
if(sessionStorage.getItem('E') ==="true"){
date[4].checked=true;
}
//お支払方法選択済み表示
var elements = document.getElementsByName("level");
var pay = sessionStorage.getItem("pay")
switch(pay){
case "代金引換":
elements[0].checked=true;
break;
case "コンビニ支払い":
elements[1].checked=true;
break;
case "クレジットカード":
elements[2].checked=true;
break;
default:
break;
}
}
function check(){
//コースの値取得
const course = [];
const check = [];
const a = document.getElementsByName("a");
for(var i = 0; i < a.length; i++){
if(a[i].checked){
course.push(a[i].value);
}
check.push(a[i].checked);
}
//お支払方法の値取得
var elements = document.getElementsByName("level");
var len = elements.length;
var pay = '';
for (var i = 0; i < len; i++){
if (elements.item(i).checked){
pay = elements.item(i).value;
}
}
//未入力チェック
if(course.length === 0){
alert("コースが選択されていません");
return;
}else if(pay.length === 0){
alert("お支払方法が選択されていません");
return;
}
sessionStorage.setItem('course', course);
sessionStorage.setItem('pay', pay);
sessionStorage.setItem('A',course[0]);
sessionStorage.setItem('B',course[1]);
sessionStorage.setItem('C',course[2]);
sessionStorage.setItem('D',course[3]);
sessionStorage.setItem('E',course[4]);
window.location.href = 'html 申し込み画面.html';
}
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="input2.css">
<script type="text/javascript" src="input2.js" charset="shift_jis"></script>
</head>
<h2>2.申し込み情報入力</h2>
<body>
<table >
<tr>
<th>コース</th>
<th></th>
</tr>
<tr>
<th></th>
<th>
<input type="checkbox" name="a"id="a" value="A"> A
</th>
</tr>
<tr>
<th></th>
<th>
<input type="checkbox" name="a" id="a" value="B"> B
</th>
</tr>
<tr>
<th></th>
<th>
<input type="checkbox" name="a"id="a"value="C"> C
</th>
</tr>
<th></th>
<th>
<input type="checkbox" name="a"id="a"value="D"> D
</th>
</tr>
<tr>
<th></th>
<th>
<input type="checkbox" name="a" id="a"value="E"> E
</th>
</tr>
<tr>
<th></th>
<th></th>
</tr>
<tr>
<th>お支払い方法</th>
<th><input type="radio" name="level" id="level"value="代金引換">代金引換</th>
</tr>
<tr>
<th></th>
<th><input type="radio" name="level" id="level" value="コンビニ引き換え">コンビニ支払い</th>
</tr>
<tr>
<th></th>
<th><input type="radio" name="level"id="level" value="クレジットカード">クレジットカード</th>
</tr>
<tr>
<td colspan="2">
<input type="button" class="button" Value="戻る" onclick="history.go(-1);">
<input type="button" class="button"Value="次へ" onclick="check()" >
</td>
</tr>
</table>
</body>
</container>
</html>
自分で試したこと
ここに問題・エラーに対して試したことを記載してください。
0
2Answer
複数のinputタグで同じidが重複していたり(基本、idはドキュメント内で一意でなくてはいけません)、チェックボックスやラジオボタンのnameがaだったりlevelだったりするのにJavaScript内ではcourseやpayといった変数で処理していて命名規則にも纏まりがないので、まずこの辺りを整理したほうが良いかと思います。
また、複数ある項目をstorageに保持する場合は、1項目1アイテムで保存していては面倒ですので、オブジェクトとしてひとまとめにして1アイテムとして保持したほうが扱いやすいかと思います。
input2.html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<link rel='stylesheet' href='input2.css'>
<script src='input2.js'></script>
</head>
<body>
<h2>2.申し込み情報入力</h2>
<table>
<tr>
<th>コース</th>
<th></th>
</tr>
<tr>
<th></th>
<th>
<label><input type='checkbox' name='course' value='A'> A</label>
</th>
</tr>
<tr>
<th></th>
<th>
<label><input type='checkbox' name='course' value='B'> B</label>
</th>
</tr>
<tr>
<th></th>
<th>
<label><input type='checkbox' name='course' value='C'> C</label>
</th>
</tr>
<tr>
<th></th>
<th>
<label><input type='checkbox' name='course' value='D'> D</label>
</th>
</tr>
<tr>
<th></th>
<th>
<label><input type='checkbox' name='course' value='E'> E</label>
</th>
</tr>
<tr>
<th></th>
<th></th>
</tr>
<tr>
<th>お支払い方法</th>
<th><label><input type='radio' name='pay' value='代金引換'>代金引換</label></th>
</tr>
<tr>
<th></th>
<th><label><input type='radio' name='pay' value='コンビニ引き換え'>コンビニ支払い</label></th>
</tr>
<tr>
<th></th>
<th><label><input type='radio' name='pay' value='クレジットカード'>クレジットカード</label></th>
</tr>
<tr>
<td colspan='2'>
<input type='button' class='button' value='戻る' onclick='history.go(-1);'>
<input type='button' class='button' value='次へ' onclick='check()' >
</td>
</tr>
</table>
</body>
</html>
input2.js
window.addEventListener('DOMContentLoaded', () => {
// sessionStorageからデータ取得
const strageData = sessionStorage.getItem('input2SelectedItem');
// データがあればオブジェクトに展開、無ければ空オブジェクト
const data = strageData !== null ? JSON.parse(strageData) : {};
// コースチェック
for(element of document.querySelectorAll('input[name=course]')) {
// 該当valueがデータにあればcheckedをtrue、無ければfalse
element.checked =
data.courseSelected && data.courseSelected.includes(element.value) ? true : false;
}
// お支払い方法チェック
for(element of document.querySelectorAll('input[name=pay]')) {
// 該当valueがデータにあればcheckedをtrue、無ければfalse
element.checked =
data.paySelected && data.paySelected.includes(element.value) ? true : false;
}
});
function check() {
// 項目検証
const unfilledItems = [];
if(document.querySelectorAll('input[name=course]:checked').length === 0) {
unfilledItems.push('コース');
}
if(document.querySelectorAll('input[name=pay]:checked').length === 0) {
unfilledItems.push('お支払い方法');
}
if(unfilledItems.length > 0) {
alert(unfilledItems.join() + 'が選択されていません');
return;
}
// チェックされているものを配列にピックアップ
const courseSelected = [];
const paySelected = [];
for(element of document.querySelectorAll('input[name=course]')) {
if(element.checked) courseSelected.push(element.value);
}
for(element of document.querySelectorAll('input[name=pay]')) {
if(element.checked) paySelected.push(element.value);
}
// JSONでまとめて一意な名前をつけてsessionStorageに保持
sessionStorage.setItem('input2SelectedItem', JSON.stringify({courseSelected, paySelected}));
// 遷移先
window.location.href = 'next.html';
}
0Like