123 lines
4.4 KiB
HTML
123 lines
4.4 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block content %}
|
|
<div class="step-container">
|
|
<div class="progress-bar">
|
|
<div class="progress-step active">1</div>
|
|
<div class="progress-line"></div>
|
|
<div class="progress-step">2</div>
|
|
<div class="progress-line"></div>
|
|
<div class="progress-step">3</div>
|
|
<div class="progress-line"></div>
|
|
<div class="progress-step">4</div>
|
|
<div class="progress-line"></div>
|
|
<div class="progress-step">5</div>
|
|
</div>
|
|
|
|
<h2>1단계: 기본 정보 입력</h2>
|
|
|
|
<form id="step1Form" class="form-container">
|
|
<div class="form-group">
|
|
<label for="name">이름 *</label>
|
|
<input type="text" id="name" name="name" value="{{ basic_info.get('name', '') }}" required>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="district">교구 *</label>
|
|
<select id="district" name="district" required>
|
|
<option value="">선택하세요</option>
|
|
{% for district in districts %}
|
|
<option value="{{ district }}" {% if basic_info.get('district') == district %}selected{% endif %}>{{ district }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="cult">이단교단 *</label>
|
|
<select id="cult" name="cult" required>
|
|
<option value="">선택하세요</option>
|
|
{% for cult in cults %}
|
|
<option value="{{ cult }}" {% if basic_info.get('cult') == cult %}selected{% endif %}>{{ cult }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group" id="cultOtherGroup" style="display: none;">
|
|
<label for="cult_other">이단교단 직접 입력 *</label>
|
|
<input type="text" id="cult_other" name="cult_other" value="{{ basic_info.get('cult_other', '') }}" placeholder="이단교단명을 입력해주세요">
|
|
</div>
|
|
|
|
<div class="form-actions">
|
|
<button type="submit" class="btn btn-primary">다음 단계</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script>
|
|
// 이단교단 선택에 따라 직접 입력 필드 표시/숨김
|
|
document.getElementById('cult').addEventListener('change', function() {
|
|
const cultOtherGroup = document.getElementById('cultOtherGroup');
|
|
const cultOtherInput = document.getElementById('cult_other');
|
|
|
|
if (this.value === '기타 (위 선택지에 없을 경우)') {
|
|
cultOtherGroup.style.display = 'block';
|
|
cultOtherInput.required = true;
|
|
} else {
|
|
cultOtherGroup.style.display = 'none';
|
|
cultOtherInput.required = false;
|
|
cultOtherInput.value = '';
|
|
}
|
|
});
|
|
|
|
// 페이지 로드 시 초기 상태 설정
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const cultSelect = document.getElementById('cult');
|
|
if (cultSelect.value === '기타 (위 선택지에 없을 경우)') {
|
|
document.getElementById('cultOtherGroup').style.display = 'block';
|
|
document.getElementById('cult_other').required = true;
|
|
}
|
|
});
|
|
|
|
document.getElementById('step1Form').addEventListener('submit', async function(e) {
|
|
e.preventDefault();
|
|
|
|
// '기타' 선택 시 직접 입력 필드 검증
|
|
const cultSelect = document.getElementById('cult');
|
|
const cultOtherInput = document.getElementById('cult_other');
|
|
|
|
if (cultSelect.value === '기타 (위 선택지에 없을 경우)') {
|
|
if (!cultOtherInput.value.trim()) {
|
|
alert('이단교단명을 직접 입력해주세요.');
|
|
cultOtherInput.focus();
|
|
return;
|
|
}
|
|
}
|
|
|
|
const formData = new FormData(this);
|
|
const data = Object.fromEntries(formData);
|
|
|
|
try {
|
|
const response = await fetch('/step1', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify(data)
|
|
});
|
|
|
|
const result = await response.json();
|
|
if (result.success) {
|
|
window.location.href = result.next_step;
|
|
} else {
|
|
alert('오류가 발생했습니다: ' + (result.message || '알 수 없는 오류'));
|
|
}
|
|
} catch (error) {
|
|
alert('오류가 발생했습니다: ' + error.message);
|
|
}
|
|
});
|
|
</script>
|
|
{% endblock %}
|
|
|