受付フォーム：ステップ式
204254 ワード
受付フォーム：ステップ式
案件として制作していたモノですが、使うことがなくなったので公開します。
ご自由にお使いくださいませ。
注意事項
- csrf対策未対応
- 漢字をカナに変換するJSライブラリは別途取り込んでください。
assets/js/common.js
const step_max = 7;
const step_min = 1;
const postcode = 1500022;
const Address = "渋谷区恵比寿南";
const name_first = "山田";
const name_last = "太郎";
const kana_name_first = "ヤマダ";
const kana_name_last = "タロウ";
const tel = "09011112222";
const email = "example@example.com";
const age = 30;
const texts =
"ご希望、ご要望などご記入ください。また、面談をすぐにご希望の方はご希望の日時を入力してください。";
const send_position = 8;
let error_step_view_flg = [];
let step_position = step_min;
let step1_value = null;
let step2_value = null;
let step3_value = [];
let step4_1_value = null;
let step4_2_value = null;
let step4_3_value = null;
let step5_1_value = null;
let step5_2_value = null;
let step5_3_value = null;
let step5_4_value = null;
let step6_1_value = null;
let step6_2_value = null;
let step7_1_value = null;
let step7_2_value = null;
document.getElementById("btn_back").addEventListener("click", function () {
check(false);
if (step_position > step_max) {
step_position = step_max;
}
if (step_position < step_min) {
step_position = step_min;
}
if (main()) {
if (error_step_view_flg[step_position]) {
switch (step_position) {
case 4:
valcheck4();
break;
case 5:
valcheck5();
break;
case 6:
valcheck6();
break;
case 7:
valcheck7();
break;
default:
break;
}
form_check(step_position);
}
}
});
document.getElementById("btn_next").addEventListener("click", function () {
let form_check_flg = false;
if ((form_check_flg = form_check(step_position))) {
check(true);
}
if (step_position === send_position) {
if (form_check(0)) {
$.ajax({
type: "post",
url: "./lib/sendmail.php",
data: {
step1_value: step1_value,
step2_value: step2_value,
step3_value: step3_value,
step4_1_value: step4_1_value,
step4_2_value: step4_2_value,
step4_3_value: step4_3_value,
step5_1_value: step5_1_value,
step5_2_value: step5_2_value,
step5_3_value: step5_3_value,
step5_4_value: step5_4_value,
step6_1_value: step6_1_value,
step6_2_value: step6_2_value,
step7_1_value: step7_1_value,
step7_2_value: step7_2_value,
},
dataType: "json",
success: function (response) {
if (response.res === "ok") {
alert("送信しました");
} else {
alert(
"送信に失敗しました、再読み込みを行い最初からやり直してください"
);
}
},
});
}
}
if (step_position > step_max) {
step_position = step_max;
}
if (step_position < step_min) {
step_position = step_min;
}
if (form_check_flg) {
if (main() && error_step_view_flg[step_position]) {
switch (step_position) {
case 4:
valcheck4();
break;
case 5:
valcheck5();
break;
case 6:
valcheck6();
break;
case 7:
valcheck7();
break;
default:
break;
}
form_check(step_position);
}
}
//例外処理
if (step_position === 1 || step_position === 2 || step_position === 3) {
main();
}
});
main();
function main() {
step(step_position);
switch (step_position) {
case 2:
document.getElementById("btn_back").style.visibility = "visible";
if (!step2_value) {
document.getElementById(
"setp_title"
).innerHTML = `<span class="text-white px-2 border-l-4 border-white">現在のご状況</span><span class="m-2 text-sm text-red-400 border-red-400 border-2 bg-white">入力必須</span>`;
$.getJSON("./assets/json/step2.json", function (step2_data) {
var str = "";
for (const key in step2_data) {
str += `
<label class="inline-flex items-center p-2 border-2 rounded w-full bg-red-400 hover:opacity-50">
<input type="radio" class="form-radio" name="step2_radio" value="${step2_data[key].choice_name}">
<span class="ml-2">${step2_data[key].choice_name}</span>
</label>`;
}
str += error_step_view_flg[step_position]
? `
<div id="step2_error" class="p-2 rounded-lg w-full text-white bg-red-600" style="display:block">選択してください</div>
`
: "";
document.getElementById("step_input").innerHTML = str;
const step2_radio = document.getElementsByName("step2_radio");
for (const key in step2_radio) {
if (Object.hasOwnProperty.call(step2_radio, key)) {
const element = step2_radio[key];
element.addEventListener("click", function (e) {
for (let i = 0; i < step2_radio.length; i++) {
if (step2_radio[i].checked) {
step2_value = step2_radio[i].value;
}
}
form_check(step_position);
main();
});
}
}
});
} else {
document.getElementById(
"setp_title"
).innerHTML = `<span class="text-white px-2 border-l-4 border-white">現在のご状況</span><span class="m-2 text-sm text-red-400 border-red-400 border-2 bg-white">入力必須</span>`;
$.getJSON("./assets/json/step2.json", function (step2_data) {
var str = "";
for (const key in step2_data) {
str += `
<label class="inline-flex items-center p-2 border-2 rounded w-full bg-white hover:opacity-50">
<input type="radio" class="form-radio" name="step2_radio" value="${step2_data[key].choice_name}">
<span class="ml-2">${step2_data[key].choice_name}</span>
</label>`;
}
document.getElementById("step_input").innerHTML = str;
const step2_radio = document.getElementsByName("step2_radio");
for (var i = 0; i < step2_radio.length; i++) {
if (step2_radio[i].value === step2_value) {
step2_radio[i].checked = true;
}
form_check(step_position);
}
for (const key in step2_radio) {
if (Object.hasOwnProperty.call(step2_radio, key)) {
const element = step2_radio[key];
element.addEventListener("click", function (e) {
for (let i = 0; i < step2_radio.length; i++) {
if (step2_radio[i].checked) {
step2_value = step2_radio[i].value;
}
}
form_check(step_position);
main();
});
}
}
});
}
break;
case 3:
if (!valcheck3()) {
document.getElementById(
"setp_title"
).innerHTML = `<span class="text-white px-2 border-l-4 border-white">ご希望雇用形態</span><span class="m-2 text-sm text-red-400 border-red-400 border-2 bg-white">入力必須</span><span class="text-white border-white">(複数選択可)</span>`;
$.getJSON("./assets/json/step3.json", function (step3_data) {
var str = "";
for (const key in step3_data) {
str += `
<label class="inline-flex items-center p-2 border-2 rounded w-full bg-red-400 hover:opacity-50">
<input type="checkbox" class="form-checkbox" name="step3_checkbox" value="${step3_data[key].choice_name}">
<span class="ml-2">${step3_data[key].choice_name}</span>
</label>`;
}
str += error_step_view_flg[step_position]
? `
<div id="step3_error" class="p-2 rounded-lg w-full text-white bg-red-600" style="display:block">選択してください</div>
`
: "";
document.getElementById("step_input").innerHTML = str;
const step3_checkbox = document.getElementsByName("step3_checkbox");
for (var i = 0; i < step3_checkbox.length; i++) {
if (step3_checkbox[i].value === step3_value[i]) {
step3_checkbox[i].checked = true;
}
}
for (const key in step3_checkbox) {
if (Object.hasOwnProperty.call(step3_checkbox, key)) {
const element = step3_checkbox[key];
element.addEventListener("click", function (e) {
for (let i = 0; i < step3_checkbox.length; i++) {
if (step3_checkbox[i].checked) {
step3_value[i] = step3_checkbox[i].value;
} else {
step3_value[i] = null;
}
}
form_check(step_position);
main();
});
}
}
});
} else {
document.getElementById(
"setp_title"
).innerHTML = `<span class="text-white px-2 border-l-4 border-white">ご希望雇用形態</span><span class="m-2 text-sm text-red-400 border-red-400 border-2 bg-white">入力必須</span><span class="text-white border-white">(複数選択可)</span>`;
$.getJSON("./assets/json/step3.json", function (step3_data) {
var str = "";
for (const key in step3_data) {
str += `
<label class="inline-flex items-center p-2 border-2 rounded w-full bg-white hover:opacity-50">
<input type="checkbox" class="form-checkbox" name="step3_checkbox" value="${step3_data[key].choice_name}">
<span class="ml-2">${step3_data[key].choice_name}</span>
</label>`;
}
document.getElementById("step_input").innerHTML = str;
const step3_checkbox = document.getElementsByName("step3_checkbox");
for (var i = 0; i < step3_checkbox.length; i++) {
if (step3_checkbox[i].value === step3_value[i]) {
step3_checkbox[i].checked = true;
}
}
for (const key in step3_checkbox) {
if (Object.hasOwnProperty.call(step3_checkbox, key)) {
const element = step3_checkbox[key];
element.addEventListener("click", function (e) {
for (let i = 0; i < step3_checkbox.length; i++) {
if (step3_checkbox[i].checked) {
step3_value[i] = step3_checkbox[i].value;
} else {
step3_value[i] = null;
}
}
main();
});
}
}
});
}
break;
case 4:
document.getElementById(
"setp_title"
).innerHTML = `<span class="text-white px-2 border-l-4 border-white">お住まいの郵便番号</span>`;
document.getElementById("step_input").innerHTML = `
<div>
<input id="postcode" name="postcode" onKeyUp="AjaxZip3.zip2addr(this,'','pref','address');" class="placeholder-black bg-red-400 shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" type="text" placeholder="${postcode}">
(半角数字で入力してください)
</div>
<div id="step4_1_error" class="p-2 rounded-lg w-full text-white bg-red-600" style="display:none">データが不正です</div>
<span class="text-white px-2 border-l-4 border-white">都道府県</span><span class="m-2 text-sm text-red-400 border-red-400 border-2 bg-white">入力必須</span>
<div>
${ken()}
</div>
<div id="step4_2_error" class="p-2 rounded-lg w-full text-white bg-red-600" style="display:none">選択してください</div>
<span class="text-white px-2 border-l-4 border-white">住所</span><span class="m-2 text-sm text-red-400 border-red-400 border-2 bg-white">入力必須</span>
<div>
<input id="address" name="address" class="placeholder-black bg-red-400 shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" type="text" placeholder="${Address}">
(可能な範囲でご入力をお願い致します)
</div>
<div id="step4_3_error" class="p-2 rounded-lg w-full text-white bg-red-600" style="display:none">入力してください</div>
`;
document.getElementById("postcode").value = step4_1_value
? step4_1_value
: "";
document.getElementById("pref").value = step4_2_value
? step4_2_value
: "";
document.getElementById("address").value = step4_3_value
? step4_3_value
: "";
document.getElementById("postcode").addEventListener("change", valcheck4);
document.getElementById("pref").addEventListener("change", valcheck4);
document.getElementById("pref").addEventListener("focus", valcheck4);
document.getElementById("address").addEventListener("keyup", valcheck4);
document.getElementById("address").addEventListener("focus", valcheck4);
break;
case 5:
document.getElementById(
"setp_title"
).innerHTML = `<span class="text-white px-2 border-l-4 border-white">お名前(漢字)</span><span class="m-2 text-sm text-red-400 border-red-400 border-2 bg-white">入力必須</span>`;
document.getElementById("step_input").innerHTML = `
<div>
<input id="name_first" name="name_first" class="mt-1 placeholder-black bg-red-400 shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" type="text" placeholder="${name_first}">
<input id="name_last" name="name_last" class="mt-1 placeholder-black bg-red-400 shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" type="text" placeholder="${name_last}">
(全角で入力してください)
</div>
<div id="step5_1_error" class="p-2 rounded-lg w-full text-white bg-red-600" style="display:none">姓を全角入力してください</div>
<div id="step5_2_error" class="p-2 rounded-lg w-full text-white bg-red-600" style="display:none">名を全角入力してください</div>
<span class="text-white px-2 border-l-4 border-white">お名前(フリガナ)</span><span class="m-2 text-sm text-red-400 border-red-400 border-2 bg-white">入力必須</span>
<div>
<input id="kana_name_first" name="kana_name_first" class="mt-1 placeholder-black bg-red-400 shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" type="text" placeholder="${kana_name_first}">
<input id="kana_name_last" name="kana_name_last" class="mt-1 placeholder-black bg-red-400 shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" type="text" placeholder="${kana_name_last}">
(全角で入力してください)
</div>
<div id="step5_3_error" class="p-2 rounded-lg w-full text-white bg-red-600" style="display:none">セイを全角入力してください</div>
<div id="step5_4_error" class="p-2 rounded-lg w-full text-white bg-red-600" style="display:none">メイを全角入力してください</div>
`;
$(function () {
$.fn.autoKana("#name_first", "#kana_name_first", {
katakana: true,
});
});
$(function () {
$.fn.autoKana("#name_last", "#kana_name_last", {
katakana: true,
});
});
document.getElementById("name_first").value = step5_1_value
? step5_1_value
: "";
document.getElementById("name_last").value = step5_2_value
? step5_2_value
: "";
document.getElementById("kana_name_first").value = step5_3_value
? step5_3_value
: "";
document.getElementById("kana_name_last").value = step5_4_value
? step5_4_value
: "";
document
.getElementById("name_first")
.addEventListener("keyup", valcheck5);
document.getElementById("name_last").addEventListener("keyup", valcheck5);
document
.getElementById("kana_name_first")
.addEventListener("keyup", valcheck5);
document
.getElementById("kana_name_last")
.addEventListener("keyup", valcheck5);
document
.getElementById("name_first")
.addEventListener("focus", valcheck5);
document.getElementById("name_last").addEventListener("focus", valcheck5);
document
.getElementById("kana_name_first")
.addEventListener("focus", valcheck5);
document
.getElementById("kana_name_last")
.addEventListener("focus", valcheck5);
break;
case 6:
document.getElementById(
"setp_title"
).innerHTML = `<span class="text-white px-2 border-l-4 border-white">電話番号</span><span class="m-2 text-sm text-red-400 border-red-400 border-2 bg-white">入力必須</span>`;
document.getElementById("step_input").innerHTML = `
<div>
<input id="tel" name="tel" class="mt-1 placeholder-black bg-red-400 shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" type="text" placeholder="${tel}">
(半角数字で入力してください、携帯電話番号でも可)
</div>
<div id="step6_1_error" class="p-2 rounded-lg w-full text-white bg-red-600" style="display:none">入力が不正です</div>
<span class="text-white px-2 border-l-4 border-white">メールアドレス</span><span class="m-2 text-sm text-red-400 border-red-400 border-2 bg-white">入力必須</span>
<div>
<input id="email" name="email" class="mt-1 placeholder-black bg-red-400 shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" type="text" placeholder="${email}">
(半角＠を含む普段お使いのメールアドレスを入力してください)
</div>
<div id="step6_2_error" class="p-2 rounded-lg w-full text-white bg-red-600" style="display:none">入力が不正です</div>
`;
document.getElementById("btn_next").innerText = "次へ";
document.getElementById("tel").value = step6_1_value ? step6_1_value : "";
document.getElementById("email").value = step6_2_value
? step6_2_value
: "";
document.getElementById("tel").addEventListener("keyup", valcheck6);
document.getElementById("tel").addEventListener("focus", valcheck6);
document.getElementById("email").addEventListener("keyup", valcheck6);
document.getElementById("email").addEventListener("focus", valcheck6);
break;
case 7:
document.getElementById(
"setp_title"
).innerHTML = `<span class="text-white px-2 border-l-4 border-white">年齢</span><span class="m-2 text-sm text-red-400 border-red-400 border-2 bg-white">入力必須</span>`;
document.getElementById("step_input").innerHTML = `
<div>
<input id="age" name="age" class="mt-1 placeholder-black bg-red-400 shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" type="text" placeholder="${age}">
(歳)
</div>
<div id="step7_1_error" class="p-2 rounded-lg w-full text-white bg-red-600" style="display:none">入力が不正です</div>
<span class="text-white px-2 border-l-4 border-white">ご希望、ご要望など</span>
<div>
<textarea id="text" name="text" class="mt-1 placeholder-black bg-white shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" type="text" placeholder="${texts}"></textarea>
</div>`;
document.getElementById("btn_next").innerText = "登録完了";
document.getElementById("age").value = step7_1_value ? step7_1_value : "";
document.getElementById("text").value = step7_2_value
? step7_2_value
: "";
document.getElementById("age").addEventListener("focus", valcheck7);
document.getElementById("age").addEventListener("keyup", valcheck7);
document.getElementById("text").addEventListener("focus", valcheck7);
document.getElementById("text").addEventListener("keyup", valcheck7);
break;
default:
document.getElementById("btn_back").style.visibility = "hidden";
if (!step1_value) {
document.getElementById(
"setp_title"
).innerHTML = `<span class="text-white px-2 border-l-4 border-white">資格</span><span class="m-2 text-sm text-red-400 border-red-400 border-2 bg-white">入力必須</span>`;
$.getJSON("./assets/json/step1.json", function (step1_data) {
var str = "";
for (const key in step1_data) {
str += `
<label class="inline-flex items-center p-2 border-2 rounded w-full bg-red-400 hover:opacity-50">
<input type="radio" class="form-radio" name="step1_radio" value="${step1_data[key].choice_name}">
<span class="ml-2">${step1_data[key].choice_name}</span>
</label>`;
}
str += error_step_view_flg[step_position]
? `
<div id="step1_error" class="p-2 rounded-lg w-full text-white bg-red-600" style="display:block">選択してください</div>
`
: "";
document.getElementById("step_input").innerHTML = str;
const step1_radio = document.getElementsByName("step1_radio");
for (const key in step1_radio) {
if (Object.hasOwnProperty.call(step1_radio, key)) {
const element = step1_radio[key];
element.addEventListener("click", function (e) {
for (var i = 0; i < step1_radio.length; i++) {
if (step1_radio[i].checked) {
step1_value = step1_radio[i].value;
}
form_check(step_position);
main();
}
});
}
}
});
} else {
document.getElementById(
"setp_title"
).innerHTML = `<span class="text-white px-2 border-l-4 border-white">資格</span><span class="m-2 text-sm text-red-400 border-red-400 border-2 bg-white">入力必須</span>`;
$.getJSON("./assets/json/step1.json", function (step1_data) {
var str = "";
for (const key in step1_data) {
str += `
<label class="inline-flex items-center p-2 border-2 rounded w-full bg-white hover:opacity-50">
<input type="radio" class="form-radio" name="step1_radio" value="${step1_data[key].choice_name}">
<span class="ml-2">${step1_data[key].choice_name}</span>
</label>`;
}
document.getElementById("step_input").innerHTML = str;
const step1_radio = document.getElementsByName("step1_radio");
for (var i = 0; i < step1_radio.length; i++) {
if (step1_radio[i].value === step1_value) {
step1_radio[i].checked = true;
}
}
for (const key in step1_radio) {
if (Object.hasOwnProperty.call(step1_radio, key)) {
const element = step1_radio[key];
element.addEventListener("click", function (e) {
const step1_radio = document.getElementsByName("step1_radio");
for (var i = 0; i < step1_radio.length; i++) {
if (step1_radio[i].checked) {
step1_value = step1_radio[i].value;
}
}
form_check(step_position);
main();
});
}
}
});
}
}
return true;
}
/////sub function
function check(mode) {
step_position = step_position + (mode ? 1 : -1);
}
function step(no) {
let str = `<span class="text-white flex items-center justify-center">step</span>`;
for (var i = 1; i <= step_max; i++) {
let Active = i === no ? `border-red-400` : "";
str += `<div id="step${i}_circle" class="${Active} border-2 m-1 rounded-full h-8 w-8 flex items-center justify-center bg-white">${i}</div>`;
}
document.getElementById("step").innerHTML = str;
}
function ken() {
return `<select id="pref" name="pref" class="bg-red-400 block appearance-none w-full border border-gray-400 hover:border-gray-500 px-4 py-2 pr-8 rounded shadow leading-tight focus:outline-none focus:shadow-outline">
<option value="">▼選択して下さい</option><option value="01">北海道</option><option value="02">青森県</option><option value="03">岩手県</option><option value="04">宮城県</option><option value="05">秋田県</option><option value="06">山形県</option><option value="07">福島県</option><option value="08">茨城県</option><option value="09">栃木県</option><option value="10">群馬県</option><option value="11">埼玉県</option><option value="12">千葉県</option><option value="13">東京都</option><option value="14">神奈川県</option><option value="15">新潟県</option><option value="16">富山県</option><option value="17">石川県</option><option value="18">福井県</option><option value="19">山梨県</option><option value="20">長野県</option><option value="21">岐阜県</option><option value="22">静岡県</option><option value="23">愛知県</option><option value="24">三重県</option><option value="25">滋賀県</option><option value="26">京都府</option><option value="27">大阪府</option><option value="28">兵庫県</option><option value="29">奈良県</option><option value="30">和歌山県</option><option value="31">鳥取県</option><option value="32">島根県</option><option value="33">岡山県</option><option value="34">広島県</option><option value="35">山口県</option><option value="36">徳島県</option><option value="37">香川県</option><option value="38">愛媛県</option><option value="39">高知県</option><option value="40">福岡県</option><option value="41">佐賀県</option><option value="42">長崎県</option><option value="43">熊本県</option><option value="44">大分県</option><option value="45">宮崎県</option><option value="46">鹿児島県</option><option value="47">沖縄県</option>
</select>
`;
}
function valcheck3() {
var flg = false;
for (const key in step3_value) {
if (step3_value[key]) {
flg = true;
}
}
return flg;
}
function valcheck4() {
document.getElementById("postcode").value
? (function () {
document.getElementById("postcode").classList.add("bg-white");
document.getElementById("postcode").classList.remove("bg-red-400");
step4_1_value = document.getElementById("postcode").value;
})()
: (function () {
document.getElementById("postcode").classList.remove("bg-white");
document.getElementById("postcode").classList.add("bg-red-400");
step4_1_value = null;
})();
document.getElementById("pref").value
? (function () {
document.getElementById("pref").classList.add("bg-white");
document.getElementById("pref").classList.remove("bg-red-400");
step4_2_value = document.getElementById("pref").value;
})()
: (function () {
document.getElementById("pref").classList.remove("bg-white");
document.getElementById("pref").classList.add("bg-red-400");
step4_2_value = null;
})();
document.getElementById("address").value
? (function () {
document.getElementById("address").classList.add("bg-white");
document.getElementById("address").classList.remove("bg-red-400");
step4_3_value = document.getElementById("address").value;
})()
: (function () {
document.getElementById("address").classList.remove("bg-white");
document.getElementById("address").classList.add("bg-red-400");
step4_3_value = null;
})();
form_check(step_position);
}
function valcheck5() {
document.getElementById("name_first").value
? (function () {
document.getElementById("name_first").classList.add("bg-white");
document.getElementById("name_first").classList.remove("bg-red-400");
step5_1_value = document.getElementById("name_first").value;
})()
: (function () {
document.getElementById("name_first").classList.remove("bg-white");
document.getElementById("name_first").classList.add("bg-red-400");
step5_1_value = null;
})();
document.getElementById("name_last").value
? (function () {
document.getElementById("name_last").classList.add("bg-white");
document.getElementById("name_last").classList.remove("bg-red-400");
step5_2_value = document.getElementById("name_last").value;
})()
: (function () {
document.getElementById("name_last").classList.remove("bg-white");
document.getElementById("name_last").classList.add("bg-red-400");
step5_2_value = null;
})();
document.getElementById("kana_name_first").value
? (function () {
document.getElementById("kana_name_first").classList.add("bg-white");
document
.getElementById("kana_name_first")
.classList.remove("bg-red-400");
step5_3_value = document.getElementById("kana_name_first").value;
})()
: (function () {
document.getElementById("kana_name_first").classList.remove("bg-white");
document.getElementById("kana_name_first").classList.add("bg-red-400");
step5_3_value = null;
})();
document.getElementById("kana_name_last").value
? (function () {
document.getElementById("kana_name_last").classList.add("bg-white");
document
.getElementById("kana_name_last")
.classList.remove("bg-red-400");
step5_4_value = document.getElementById("kana_name_last").value;
})()
: (function () {
document.getElementById("kana_name_last").classList.remove("bg-white");
document.getElementById("kana_name_last").classList.add("bg-red-400");
step5_4_value = null;
})();
form_check(step_position);
}
function valcheck6() {
document
.getElementById("tel")
.value.replace(/[━.*‐.*―.*－.*\-.*ー.*\-]/gi, "")
? (function () {
document.getElementById("tel").classList.add("bg-white");
document.getElementById("tel").classList.remove("bg-red-400");
step6_1_value = document
.getElementById("tel")
.value.replace(/[━.*‐.*―.*－.*\-.*ー.*\-]/gi, "");
})()
: (function () {
document.getElementById("tel").classList.remove("bg-white");
document.getElementById("tel").classList.add("bg-red-400");
step6_1_value = null;
})();
document.getElementById("email").value
? (function () {
document.getElementById("email").classList.add("bg-white");
document.getElementById("email").classList.remove("bg-red-400");
step6_2_value = document.getElementById("email").value;
})()
: (function () {
document.getElementById("email").classList.remove("bg-white");
document.getElementById("email").classList.add("bg-red-400");
step6_2_value = null;
})();
form_check(step_position);
}
function valcheck7() {
document.getElementById("age").value
? (function () {
document.getElementById("age").classList.add("bg-white");
document.getElementById("age").classList.remove("bg-red-400");
step7_1_value = document.getElementById("age").value;
})()
: (function () {
document.getElementById("age").classList.remove("bg-white");
document.getElementById("age").classList.add("bg-red-400");
step7_1_value = null;
})();
document.getElementById("text").value
? (function () {
step7_2_value = document.getElementById("text").value;
})()
: (function () {
step7_2_value = null;
})();
form_check(step_position);
}
function form_check(step_position_i) {
let form_check_cnt = 0;
for (
var i = step_position_i ? step_position_i : step_min;
i <= (step_position_i ? step_position_i : step_max);
i++
) {
switch (i) {
case 1:
step1_value
? (function () {
document.getElementById("btn_back").style.visibility = "hidden";
document
.getElementById("btn_next")
.classList.remove("cursor-not-allowed");
document.getElementById("btn_next").disabled = false;
form_check_cnt++;
})()
: (function () {
document.getElementById("btn_back").style.visibility = "hidden";
document
.getElementById("btn_next")
.classList.add("cursor-not-allowed");
document.getElementById("btn_next").disabled = true;
})();
break;
case 2:
step2_value
? (function () {
document.getElementById("btn_back").style.visibility = "visible";
document
.getElementById("btn_next")
.classList.remove("cursor-not-allowed");
document.getElementById("btn_next").disabled = false;
form_check_cnt++;
})()
: (function () {
document.getElementById("btn_back").style.visibility = "visible";
document
.getElementById("btn_next")
.classList.add("cursor-not-allowed");
document.getElementById("btn_next").disabled = true;
})();
break;
case 3:
valcheck3()
? (function () {
document
.getElementById("btn_next")
.classList.remove("cursor-not-allowed");
document.getElementById("btn_next").disabled = false;
form_check_cnt++;
})()
: (function () {
document
.getElementById("btn_next")
.classList.add("cursor-not-allowed");
document.getElementById("btn_next").disabled = true;
})();
break;
case 4:
var flg = [];
step4_1_value
? (function () {
let judge = false;
let regex = new RegExp(/^[0-9]{3}[0-9]{4}$/);
flg[0] = judge = regex.test(step4_1_value);
if (flg[0]) {
document.getElementById("step4_1_error").style.display = "none";
} else {
document.getElementById("step4_1_error").style.display =
"block";
}
})()
: (function () {
flg[0] = false;
document.getElementById("step4_1_error").style.display = "block";
})();
step4_2_value
? (function () {
let judge = false;
let regex = new RegExp(/^[0-9]{2}$/);
flg[1] = judge = regex.test(step4_2_value);
if (flg[1]) {
document.getElementById("step4_2_error").style.display = "none";
} else {
document.getElementById("step4_2_error").style.display =
"block";
}
})()
: (function () {
flg[1] = false;
document.getElementById("step4_2_error").style.display = "block";
})();
step4_3_value
? (function () {
let judge = false;
flg[2] = judge = true;
document.getElementById("step4_3_error").style.display = "none";
})()
: (function () {
flg[2] = false;
document.getElementById("step4_3_error").style.display = "block";
})();
flg_check(flg)
? (function () {
document
.getElementById("btn_next")
.classList.remove("cursor-not-allowed");
document.getElementById("btn_next").disabled = false;
form_check_cnt++;
})()
: (function () {
document
.getElementById("btn_next")
.classList.add("cursor-not-allowed");
document.getElementById("btn_next").disabled = true;
})();
break;
case 5:
var flg = [];
step5_1_value
? (function () {
let judge = false;
let regex = new RegExp(/^[^\x01-\x7E\xA1-\xDF]+$/);
flg[0] = judge = regex.test(step5_1_value);
if (flg[0]) {
document.getElementById("step5_1_error").style.display = "none";
} else {
document.getElementById("step5_1_error").style.display =
"block";
}
})()
: (function () {
flg[0] = false;
document.getElementById("step5_1_error").style.display = "block";
})();
step5_2_value
? (function () {
let judge = false;
let regex = new RegExp(/^[^\x01-\x7E\xA1-\xDF]+$/);
flg[1] = judge = regex.test(step5_2_value);
if (flg[1]) {
document.getElementById("step5_2_error").style.display = "none";
} else {
document.getElementById("step5_2_error").style.display =
"block";
}
})()
: (function () {
flg[1] = false;
document.getElementById("step5_2_error").style.display = "block";
})();
step5_3_value
? (function () {
let judge = false;
let regex = new RegExp(/^[^\x01-\x7E\xA1-\xDF]+$/);
flg[2] = judge = regex.test(step5_3_value);
if (flg[2]) {
document.getElementById("step5_3_error").style.display = "none";
} else {
document.getElementById("step5_3_error").style.display =
"block";
}
})()
: (function () {
flg[2] = false;
document.getElementById("step5_3_error").style.display = "block";
})();
step5_4_value
? (function () {
let judge = false;
let regex = new RegExp(/^[^\x01-\x7E\xA1-\xDF]+$/);
flg[3] = judge = regex.test(step5_4_value);
if (flg[3]) {
document.getElementById("step5_4_error").style.display = "none";
} else {
document.getElementById("step5_4_error").style.display =
"block";
}
})()
: (function () {
flg[3] = false;
document.getElementById("step5_4_error").style.display = "block";
})();
flg_check(flg)
? (function () {
document
.getElementById("btn_next")
.classList.remove("cursor-not-allowed");
document.getElementById("btn_next").disabled = false;
form_check_cnt++;
})()
: (function () {
document
.getElementById("btn_next")
.classList.add("cursor-not-allowed");
document.getElementById("btn_next").disabled = true;
})();
break;
case 6:
var flg = [];
step6_1_value
? (function () {
let judge = false;
let regex = new RegExp(/^(0[5-9]0[0-9]{8}|0[1-9][1-9][0-9]{7})$/);
flg[0] = judge = regex.test(
step6_1_value.replace(/[━.*‐.*―.*－.*\-.*ー.*\-]/gi, "")
);
if (flg[0]) {
document.getElementById("step6_1_error").style.display = "none";
} else {
document.getElementById("step6_1_error").style.display =
"block";
}
})()
: (function () {
flg[0] = false;
document.getElementById("step6_1_error").style.display = "block";
})();
step6_2_value
? (function () {
let judge = false;
let regex = new RegExp(
/^[A-Za-z0-9]{1}[A-Za-z0-9_.-]*@{1}[A-Za-z0-9_.-]{1,}.[A-Za-z0-9]{1,}$/
);
flg[1] = judge = regex.test(step6_2_value);
if (flg[1]) {
document.getElementById("step6_2_error").style.display = "none";
} else {
document.getElementById("step6_2_error").style.display =
"block";
}
})()
: (function () {
flg[1] = false;
document.getElementById("step6_2_error").style.display = "block";
})();
flg_check(flg)
? (function () {
document
.getElementById("btn_next")
.classList.remove("cursor-not-allowed");
document.getElementById("btn_next").disabled = false;
form_check_cnt++;
})()
: (function () {
document
.getElementById("btn_next")
.classList.add("cursor-not-allowed");
document.getElementById("btn_next").disabled = true;
})();
break;
case 7:
var flg = [];
step7_1_value
? (function () {
let judge = false;
let regex = new RegExp(/^[0-9]{2}$/);
flg[0] = judge = regex.test(step7_1_value);
if (flg[0]) {
document.getElementById("step7_1_error").style.display = "none";
} else {
document.getElementById("step7_1_error").style.display =
"block";
}
})()
: (function () {
flg[0] = false;
document.getElementById("step7_1_error").style.display = "block";
})();
flg_check(flg)
? (function () {
document
.getElementById("btn_next")
.classList.remove("cursor-not-allowed");
document.getElementById("btn_next").disabled = false;
form_check_cnt++;
})()
: (function () {
document
.getElementById("btn_next")
.classList.add("cursor-not-allowed");
document.getElementById("btn_next").disabled = true;
})();
break;
}
error_step_view_flg[i] = error_step_view_flg[i]
? error_step_view_flg[i]
: true;
}
if (step_position_i) {
return form_check_cnt ? true : false;
}
return step_max === form_check_cnt ? true : false;
}
function flg_check(flg) {
let cnt = 0;
for (key in flg) {
flg[key] ? ++cnt : "";
}
//console.log(flg, cnt);
return flg.length === cnt ? true : false;
}
sendmail.php
<?php
ini_set("display_errors",0);
session_start();
//送信データ
$step1_value = strip_tags($_POST["step1_value"]);
$step2_value = strip_tags($_POST["step2_value"]);
$step3_value = $_POST["step3_value"];
$step4_1_value = strip_tags($_POST["step4_1_value"]);
$step4_2_value = strip_tags($_POST["step4_2_value"]);
$step4_3_value = strip_tags($_POST["step4_3_value"]);
$step5_1_value = strip_tags($_POST["step5_1_value"]);
$step5_2_value = strip_tags($_POST["step5_2_value"]);
$step5_3_value = strip_tags($_POST["step5_3_value"]);
$step5_4_value = strip_tags($_POST["step5_4_value"]);
$step6_1_value = strip_tags($_POST["step6_1_value"]);
$step6_2_value = strip_tags($_POST["step6_2_value"]);
$step7_1_value = strip_tags($_POST["step7_1_value"]);
$step7_2_value = strip_tags($_POST["step7_2_value"]);
//再チェック
$flg = false;
//step1
$flg = $step1_value?true:false;
//step2
if($flg){
$flg = $step2_value?true:false;
}
//step3
if($flg){
$str = null;
if(is_array($step3_value)){
$step3_str = null;
foreach ($step3_value as $key => $value) {
if($value){
$str[]= strip_tags($value);
}
}
$flg = $str?true:false;
$step3_str = @implode(",",$str);
}
}
//step4
if($flg){
$step4_2_str = null;
$flg = preg_match("/^[0-9]{3}[0-9]{4}$/",$step4_1_value)?true:false;
if($flg){
$flg = ken($step4_2_value)?true:false;
$step4_2_str = ken($step4_2_value);
}
if($flg){
$flg = $step4_3_value?true:false;
}
}
//step5
if($flg){
$flg = preg_match('/^[^\x01-\x7E\xA1-\xDF]+$/u', $step5_1_value)?true:false;
if($flg){
$flg = preg_match('/^[^\x01-\x7E\xA1-\xDF]+$/u', $step5_2_value)?true:false;
}
if($flg){
$flg = preg_match('/^[^\x01-\x7E\xA1-\xDF]+$/u', $step5_3_value)?true:false;
}
if($flg){
$flg = preg_match('/^[^\x01-\x7E\xA1-\xDF]+$/u', $step5_4_value)?true:false;
}
}
//step6
if($flg){
$flg = preg_match('/^(0[5-9]0[0-9]{8}|0[1-9][1-9][0-9]{7})$/', $step6_1_value)?true:false;
if($flg){
$flg = preg_match('/^[A-Za-z0-9]{1}[A-Za-z0-9_.-]*@{1}[A-Za-z0-9_.-]{1,}.[A-Za-z0-9]{1,}$/', $step6_2_value)?true:false;
}
}
//step7
if($flg){
$flg = preg_match("/^[0-9]{2}$/",$step7_1_value)?true:false;
}
//sendmail
if($flg){
//受付メール設定
$toaddress ="mail@example.com";//サーバーに登録されているメールアドレス
$fromaddress1 = "noreply@example.com";
$subject = "受付件名";
$sendtext = "
受付内容
名前 $step5_1_value $step5_2_value
カナ $step5_3_value $step5_4_value
年齢 $step7_1_value
電話番号 $step6_1_value
メールアドレス $step6_2_value
住所 $step4_1_value
$step4_2_str $step4_3_value
要望など
$step7_2_value
step1: $step1_value
step2: $step2_value
step3: $step3_str
";
//サンクスメールメール設定
$fromaddress2 = "noreply@example.com";
$thanks_subject = "サンクスメール件名";
$thanks_text = "
$step5_1_value $step5_2_value 様
この度は【●●●●●店】をご利用いただき、誠にありがとうございます。
まずは、心から御礼申し上げます。
お客様のご注文を以下の内容で承りました。ご確認いただき、内容に誤りなどございましたら、お早目に当店までお問い合わせ下さいますようお願いいたします。
◇ご連絡はこちらまで
";
mb_language("Japanese");
mb_internal_encoding("UTF-8");
$to = $toaddress;
$header = "From: $fromaddress1\n";
$header.= "Return-Path: $fromaddress1\n";
$subject = $subject;
$message = $sendtext;
if($flg = mb_send_mail($to, $subject, $message,$header)){
}
if($flg){
$to = $step6_2_value;
$header = "From: $fromaddress2";
$subject = $thanks_subject;
$message = $thanks_text;
if($flg = mb_send_mail($to, $subject, $message,$header)){
}
}
}
//json
$ret["res"] = "ng";
if($flg){
$ret["res"] = "ok";
}
print json_encode($ret);
function ken($no){
if(!$no)return false;
$kenno = array(
"01"=>"北海道",
"02"=>"青森県",
"03"=>"岩手県",
"04"=>"宮城県",
"05"=>"秋田県",
"06"=>"山形県",
"07"=>"福島県",
"08"=>"茨城県",
"09"=>"栃木県",
"10"=>"群馬県",
"11"=>"埼玉県",
"12"=>"千葉県",
"13"=>"東京都",
"14"=>"神奈川県",
"15"=>"新潟県",
"16"=>"富山県",
"17"=>"石川県",
"18"=>"福井県",
"19"=>"山梨県",
"20"=>"長野県",
"21"=>"岐阜県",
"22"=>"静岡県",
"23"=>"愛知県",
"24"=>"三重県",
"25"=>"滋賀県",
"26"=>"京都府",
"27"=>"大阪府",
"28"=>"兵庫県",
"29"=>"奈良県",
"30"=>"和歌山県",
"31"=>"鳥取県",
"32"=>"島根県",
"33"=>"岡山県",
"34"=>"広島県",
"35"=>"山口県",
"36"=>"徳島県",
"37"=>"香川県",
"38"=>"愛媛県",
"39"=>"高知県",
"40"=>"福岡県",
"41"=>"佐賀県",
"42"=>"長崎県",
"43"=>"熊本県",
"44"=>"大分県",
"45"=>"宮崎県",
"46"=>"鹿児島県",
"47"=>"沖縄県");
return @$kenno[$no]?$kenno[$no]:false;
}
Author And Source
この問題について(受付フォーム：ステップ式), 我々は、より多くの情報をここで見つけました https://qiita.com/taoka-toshiaki/items/c5aad70510722adb6c93著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .