【テスト】ステップ式お問い合わせフォーム

input[type="checkbox"], input[type="radio"] { -webkit-appearance: auto; } #loader-bg { display: none; position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; background: #000; opacity: 0.3; z-index: 10000; } #loader { position: fixed; top: 50%; left: 50%; width: 200px; height: 200px; margin-top: -100px; margin-left: -100px; text-align: center; color: #fff; z-index: 1000; } #loader img { object-fit: contain; }

入力内容の確認

Now Loading...

')); photo.show(); }); reader.readAsDataURL(file); label.hide(); } buttonDelete.on("click", function (e) { e.preventDefault(); var fileInput = $(this).siblings("input"); var fileName = fileInput.get(0).name; var label = $(this) .closest(".c-upload") .find("label[for=" + fileInput.get(0).id + "]"); photo.find("img").remove(); photo.find(".mwform-file-delete").trigger("click"); currentTippy.popperInstance.update(); photo.hide(); label.show(); $(".modal--confirm") .find("#" + fileName) .attr("src", ""); }); }); $(".c-upload .photo").on("change", function () { var _this = $(this); LOADER.show(); setTimeout(function () { try { const fileInput = _this.find("input"), file = fileInput.get(0).files[0], fileType = file["type"], photo = fileInput.closest(".photo"), label = _this.closest(".c-upload").find("label[for=" + fileInput.get(0).id + "]"), deleteBtn = photo.find(".mwform-file-delete"), validImageTypes = ["image/jpg", "image/jpeg", "image/png"]; if (file && !($.inArray(fileType, validImageTypes) 0) { photo.find("img").remove(); } const reader = new FileReader(); reader.addEventListener("load", function () { photo.append($('

')); currentTippy.popperInstance.update(); photo.show(); LOADER.hide(); }); reader.readAsDataURL(file); label.hide(); } else { deleteBtn.trigger("click"); throw Error("不正なファイルです"); return; } } catch (err) { setTimeout(function () { alert(err.message); LOADER.hide(); }, 200); return; } }, 500); }); }); $(".c-checkboxNew").on("change", function (e) { if ($(this).is(":checked")) { $(this).closest("label").addClass("is-checked"); } else { $(this).closest("label").removeClass("is-checked"); } }); $(".c-radioNew").on("change", function () { // Remove the "is-checked" class from all sibling labels that are not checked $(this).closest(".mwform-radio-field").siblings().find("label").removeClass("is-checked"); // Add the "is-checked" class to the parent label of the checked radio input $(this).closest("label").addClass("is-checked"); }); var container = document.querySelector(".mw_wp_form"); container.addEventListener("change", async function (event) { var target = event.target; if (target.tagName === "INPUT" || target.tagName === "TEXTAREA") { var value; if (target.type === "checkbox") { var checkboxes = document.querySelectorAll('input[type="checkbox"][name="' + target.name + '"]:checked'); var values = Array.from(checkboxes).map(function (checkbox) { return checkbox.value; }); value = values.join(", "); } else if (target.type === "radio") { var radio = document.querySelector('input[type="radio"][name="' + target.name + '"]:checked'); value = radio ? radio.value : ""; } else if (target.type === "file") { var file = target.files[0]; // get the first file value = await readFileAsDataURL(file); } else { value = target.value; } if (value.length > 0) { let targetName = target.name; if (targetName == "your-condition[data][]") { targetName = "your-condition"; } let confirmTarget = $(".modal--confirm").find("#" + targetName); if (confirmTarget.is("img")) { confirmTarget.attr("src", value); } else { confirmTarget.find("dd").text(value); } } } }); function readFileAsDataURL(file) { return new Promise(function (resolve, reject) { var reader = new FileReader(); reader.onload = function (event) { resolve(event.target.result); }; reader.onerror = function (event) { reject(event.target.error); }; reader.readAsDataURL(file); }); }

目的から探す

タグから探す

入力内容の確認