解説してほしいです。
Q&A
解決したいこと
解答例が出されたのですが、どういう意味なのかさっぱりなので解説してくれると恐縮です。
長々とコピペしましたが、分からない所はjsの入力内容表示についてです。
//入力内容表示
//ドロップダウンリストの処理
window.onload = function onLoad() {
var age = document.getElementById("age");
var df = document.createDocumentFragment();
var option = document.createElement('option');
option.setAttribute("hidden", "hidden");
age.appendChild(option);
for(var i=0; i<=130; i++){
var option = document.createElement('option');
option.value = Number(i);
option.appendChild(document.createTextNode(i));
df.appendChild(option);
}
age.appendChild(df);
//入力内容表示
if(sessionStorage.getItem("name1") !== null){
document.getElementById("name1").defaultValue = sessionStorage.getItem("name1");
}
if(sessionStorage.getItem("name2") !== null){
document.getElementById("name2").defaultValue = sessionStorage.getItem("name2");
}
var selectedAge = sessionStorage.getItem("age");
for(var i=0;i<=130;i++){
if(sessionStorage.getItem("age") == i){
document.getElementById("age")[i + 1].selected = true;
}
}
if(sessionStorage.getItem("add1") !== null){
document.getElementById("add1").defaultValue = sessionStorage.getItem("add1");
}
if(sessionStorage.getItem("add2") !== null){
document.getElementById("add2").defaultValue = sessionStorage.getItem("add2");
}
if(sessionStorage.getItem("sumika1") !== null){
document.getElementById("sumika1").defaultValue = sessionStorage.getItem("sumika1");
}
if(sessionStorage.getItem("sumika2") !== null){
document.getElementById("sumika2").defaultValue = sessionStorage.getItem("sumika2");
}
if(sessionStorage.getItem("build") !== null){
document.getElementById("build").defaultValue = sessionStorage.getItem("build");
}
}
function option(){
const name1 = document.getElementById("name1").value;
const name2 = document.getElementById("name2").value;
const age = document.getElementById("age").value;
const add1 = document.getElementById("add1").value;
const add2 = document.getElementById("add2").value;
const sumika1 = document.getElementById("sumika1").value;
const sumika2 = document.getElementById("sumika2").value;
const build = document.getElementById("build").value;
//未入力チェック
if(name1.length === 0){
alert("名前(姓)は必須入力です。");
return;
}else if(name2.length === 0){
alert("名前(名)は必須入力です。");
return;
}else if(age.length === 0){
alert("年齢は必須選択です。");
return;
}else if(add1.length === 0){
alert("アドレスは必須入力です");
return;
}else if(add2.length === 0){
alert("アドレス(確認用)は必須入力です。");
return;
}else if(sumika1.length === 0){
alert("住所は必須入力です。");
return;
}else if(sumika2.length === 0){
alert("住所2は必須入力です。");
return;
}
//入力値チェック
if(name1.length > 20 || name2.length > 20){
alert("名前は20字以内で入力してください。");
return;
}else if(!add1.match(/^[A-Za-z0-9]{1}[A-Za-z0-9_.-]*@{1}[A-Za-z0-9_.-]{1,}\.[A-Za-z0-9]{1,}$/)){
alert("メールアドレスの形式が違います。");
return;
}else if(name1.match(/[0-9]/) || name2.match(/[0-9]/)){
alert("名前に数字は使用できません。");
return;
}else if(add1 !== add2){
alert("メールアドレスとメールアドレス(確認用)が一致しません。");
return
}
sessionStorage.setItem('name1', name1);
sessionStorage.setItem('name2', name2);
sessionStorage.setItem('age', age);
sessionStorage.setItem('add1', add1);
sessionStorage.setItem('add2', add2);
sessionStorage.setItem('sumika1', sumika1);
sessionStorage.setItem('sumika2', sumika2);
sessionStorage.setItem('build', build);
window.location.href = 'html 入力画面2.html';
}
name1のところは、入力フォームの値です。
該当するソースコード
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="input1.css">
<script type="text/javascript" src="input1.js" charset="shift_jis"></script>
</head>
<h2>1.基本情報入力</h2>
<main>
<table>
<tr>
<th>名前（姓）</th>
<td><input id="name1" ></td>
</tr>
<tr>
<th>名前（名）</th>
<td><input id="name2" ></td>
</tr>
<tr>
<th>年齢</th>
<td><select name="age" id="age">
<option></option>
</th><th>歳</td>
</tr>
<tr>
<th>メールアドレス</th>
<td><input id="add1" ></td>
</tr>
<tr>
<th>メールアドレス<br>（確認用）</th>
<td ><input id="add2" ></td>
</tr>
<tr>
<th>住所1</th>
<td><input id="sumika1" ></td>
</tr>
<tr>
<th>住所2</th>
<td><input id="sumika2" ></td>
</tr>
<tr>
<th>建物名等</th>
<td><input id="build"></td>
</tr>
<tr>
<th></th>
<th> <input type="submit" value="次へ" class="btn" onclick="option()"></th>
</tr>
</table>
</main>
</container>
</html>
0
