72 lines
3.1 KiB
PHP
72 lines
3.1 KiB
PHP
<div class="card border-0 shadow-sm p-4 p-md-5 rounded-4 bg-light">
|
|
<form id="inquiryForm">
|
|
<div class="row g-3">
|
|
<div class="col-md-6">
|
|
<label class="form-label small fw-bold">성함 / 업체명</label>
|
|
<input type="text" id="title" name="title" class="form-control" placeholder="성함을 입력하세요">
|
|
<div class="error" data-error-for="title"></div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label small fw-bold">이메일</label>
|
|
<input type="email" id="email" name="email" class="form-control" placeholder="예) contact@domain.com">
|
|
<div class="error" data-error-for="email"></div>
|
|
</div>
|
|
<div class="col-12">
|
|
<label class="form-label small fw-bold">문의 내용</label>
|
|
<textarea id="content" name="content" class="form-control" rows="5"
|
|
placeholder="문의하실 내용을 상세히 적어주세요."></textarea>
|
|
<div class="error" data-error-for="content"></div>
|
|
</div>
|
|
<div class="col-12 mt-4">
|
|
<button type="submit" id="submit" class="btn btn-dark w-100 py-3 fw-bold">문의 접수하기</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
<div class="error text-danger mb-2" data-error-for="_global"></div>
|
|
</div>
|
|
<script type="text/javascript">
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const form = document.getElementById('inquiryForm');
|
|
if (!form) return;
|
|
|
|
form.addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
|
|
// 에러 초기화
|
|
document.querySelectorAll('.error').forEach(el => el.textContent = '');
|
|
|
|
const formData = new FormData(form);
|
|
|
|
const res = await fetch('/inquiry/create', {
|
|
method: 'POST',
|
|
body: formData,
|
|
headers: { 'X-Requested-With': 'XMLHttpRequest' }
|
|
});
|
|
|
|
// 응답이 JSON이 아닐 수도 있으니 안전하게
|
|
let data = {};
|
|
try { data = await res.json(); } catch (e) { }
|
|
|
|
// ✅ 422: 필드별 에러
|
|
if (res.status === 422 && data.errors) {
|
|
Object.entries(data.errors).forEach(([field, msg]) => {
|
|
const box = document.querySelector(`[data-error-for="${field}"]`);
|
|
if (box) box.textContent = msg;
|
|
});
|
|
return;
|
|
}
|
|
|
|
// ✅ 그 외 에러: message를 전역 에러로 표시
|
|
if (!res.ok || data.ok === false) {
|
|
const globalBox = document.querySelector(`[data-error-for="_global"]`);
|
|
if (globalBox) globalBox.textContent = data.message || '처리 중 오류가 발생했습니다.';
|
|
else alert(data.message || '처리 중 오류가 발생했습니다.');
|
|
return;
|
|
}
|
|
|
|
// ✅ 성공
|
|
alert('문의가 접수되었습니다.');
|
|
form.reset();
|
|
});
|
|
});
|
|
</script> |