Language
PHP
Compiler
php 7.1.6
Options
$ php prog.php <!DOCTYPE html>
<html lang="ja">
<head>
<meta content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>企業ホームページ お問い合わせ画面VANIA</title>
<link rel="stylesheet" href="companyhp6form1.css">
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="companyhp6form1responsive.css">
<script src="jquery-3.6.0.min.js"></script>
<style type="text/css">
/* レスポンシブ対応で右に出る謎の余白を無くす */
.wrapper {
overflow: hidden;
}
/* 入力フォームの位置 */
.auto-style1 {
text-align: center;
}
/* セレクトボックスの位置 */
.auto-style2 {
text-align: center;
/* セレクトボックス中央に配置 */
margin-top: 30px;
}
</style>
</head>
<body>
<!--javaによるエラー表示のためid="form"を追加-->
<form action="companyhp6form1.php" method="post" id="form">
<div class="auto-style2">
<p class="tel-titile14">
お問い合わせ内容を選択する：※
</p>
<span class="selectbox">
<select id="plan" class="plan" name="plan">
<option value="">お問い合わせ内容選択</option>
<option value="事業内容について" >事業内容について
</option>
<option value="サポートについて" >サポートについて</option>
<option value="その他弊社にお問い合わせ" >その他弊社にお問い合わせ
</option>
</select>
</span>
</div>
<div class="auto-style2">
<p class="tel-titile15">
業種を選択する：※
</p>
<span class="selectbox">
<select id="plan2" class="plan2" name="plan2">
<option value="">業種の選択</option>
<option value="法人のお客様" >法人のお客様
</option>
<option value="個人のお客様" >個人のお客様</option>
</select>
</span>
</div>
<!--フォーム中央寄せのため１つ１つdivで囲むauto-style1-->
<div class="auto-style1">
<p class="tel-titile">
名前：※
</p>
<input type="text" class="name" name="name" id="name" value="" />
</div>
<div class="auto-style1">
<p class="tel-titile">
フリガナ：※
</p>
<input type="text" class="furigana" name="furigana" id="furigana"
value="" />
</div>
<div class="auto-style1">
<p class="tel-titile">
電話番号：※
</p>
<input type="text" class="tel" name="tel" id="tel" value="" />
</div>
<div class="auto-style1">
<p class="tel-titile">
メールアドレス：※
</p>
<input type="text" class="email" name="email" id="email"
value="" />
</div>
<div class="auto-style1">
<p class="tel-titile">
メールアドレス（確認用）：※
</p>
<input type="text" class="emailss" name="emailss" id="emailss"
value="" />
</div>
<div class="auto-style1">
<p class="tel-titile">
お問い合わせ内容入力（150文字）：
</p>
<textarea name="question" class="question" id="question" cols="40" rows="10" placeholder="150文字以内で入力して下さい。"></textarea>
</div>
<div class="auto-style1">
<button type="submit" id="submit" name="submit" class="auto-style4">
送信</button>
</div>
</form>
<div id="test">
</div>
<script>
const key = 'date_key';
const form = document.querySelector('#form');
const plan = document.querySelector('#plan');
const plan2 = document.querySelector('#plan2');
const name = document.querySelector('#name');
const furigana = document.querySelector('#furigana');
const tel = document.querySelector('#tel');
const email = document.querySelector('#email');
const emailss = document.querySelector('#emailss');
const question = document.querySelector('#question');
form.addEventListener('submit', function(event) {
let msg = "";
// デバッグのためチェックを外すパターンも試す
if (plan.value == "") msg += "お問い合わせ内容を選択して下さい。\n";
if (plan2.value == "") msg += "業種の選択するを選択して下さい。\n";
if (name.value == "") msg += "名前が入力されていません。\n";
if (furigana.value == "") msg += "フリガナが入力されていません。\n";
if (tel.value == "") msg += "電話番号が入力されていません。\n";
if (email.value == "") msg += "メールアドレスが入力されていません。\n";
if (emailss.value == "") msg += "メールアドレス（確認用）が入力されていません。\n";
if (question.value == "") msg += "お問い合わせ内容を入力してください\n";
if (msg != "") {
event.preventDefault();
alert(msg);
}
});
form.addEventListener('change', function() {
if (plan.value != "") sessionStorage.setItem('plan', plan.value);
if (plan2.value != "") sessionStorage.setItem('plan2', plan2.value);
if (name.value != "") sessionStorage.setItem('name', name.value);
if (furigana.value != "") sessionStorage.setItem('furigana', furigana.value);
if (tel.value != "") sessionStorage.setItem('tel', tel.value);
if (email.value != "") sessionStorage.setItem('email', email.value);
if (emailss.value != "") sessionStorage.setItem('emailss', emailss.value);
if (question.value != "") sessionStorage.setItem('question', question.value);
});
let val1 = sessionStorage.getItem('plan');
if(val1!== null)plan.value = val1;
let val2 = sessionStorage.getItem('plan2');
if(val2!== null)plan2.value = val2;
name.value = sessionStorage.getItem('name');
furigana.value = sessionStorage.getItem('furigana');
tel.value = sessionStorage.getItem('tel');
email.value = sessionStorage.getItem('email');
emailss.value = sessionStorage.getItem('emailss');
question.value = sessionStorage.getItem('question');
</script>
</body>
</html>Exit Code:
0