required 무시하고 글쓰기 하는 방법좀 알려주세요.ㅠ.ㅠ.
본문
게시판 분류흘 활용하여 선택시 인풋값을 다르게 나오게 할려고 아래와 같이 했는데요..
문제는 선택되지 않은 인풋값의 required 때문에 글 작성이 안되고 있습니다.. 스크립트를 이리저리 바꿔도 통과가 안되고 알럿창이 나오네요.ㅠㅠ.ㅠ.ㅠ
..
required를 없애는 방법도 있겠지만 있는 상태에서 선택되지 않은것들은 무시하고 글쓰기 되는 방법이 없을까요?..
<!-- 여분필드 { -->
<div id="category-forms" style="display:none;">
<!-- 1 -->
<div class="cat-form" data-cat="이름" style="display:none;">
<div class="rb_inp_cont">
<ul>
<input type="text" name="wr_3" value="<?php echo $write['wr_3'] ?>" id="wr_3" required class="input required" maxlength="255" placeholder="이름">
<input type="text" name="wr_4" value="<?php echo $write['wr_4'] ?>" id="wr_4" required class="input required" maxlength="255" placeholder="생년월일">
</div>
</div>
<!-- 1 끝 -->
<!-- 2 -->
<div class="cat-form" data-cat="지역" style="display:none;">
<div class="rb_inp_cont">
<ul>
<input type="text" name="wr_5" value="<?php echo $write['wr_5'] ?>" id="wr_5" required class="input required" maxlength="255" placeholder="주소">
<input type="text" name="wr_6" value="<?php echo $write['wr_6'] ?>" id="wr_6" required class="input required" maxlength="255" placeholder="연락처">
</div>
</div>
<!-- 2 끝 -->
</div>
<script>
<script>
window.addEventListener("DOMContentLoaded", () => {
const select = document.querySelector("select[name='ca_name']");
const wrapper = document.getElementById("category-forms");
const forms = document.querySelectorAll(".cat-form");
const formElement = document.querySelector("form");
const toggleForm = (val) => {
if (!val) {
wrapper.style.display = "none";
// 선택 없음 시 모두 disabled 처리
forms.forEach(form => {
form.style.display = "none";
form.querySelectorAll("input, select, textarea").forEach(el => {
el.disabled = true;
});
});
return;
}
wrapper.style.display = "block";
forms.forEach(form => {
const isActive = form.dataset.cat === val;
form.style.display = isActive ? "block" : "none";
form.querySelectorAll("input, select, textarea").forEach(el => {
el.disabled = !isActive;
});
});
};
// 초기 표시
toggleForm(select?.value);
// 셀렉트 값 변경 시 동작
select?.addEventListener("change", e => toggleForm(e.target.value));
// 폼 제출 시에도 활성화 상태 유지
formElement?.addEventListener("submit", () => {
toggleForm(select?.value);
});
});
</script>
</script>
<!-- 여분필드끝 -->
답변 4
<!-- 여분필드 { -->
<div id="category-forms" style="display:none;">
<!-- 1 -->
<div class="cat-form" data-cat="이름" style="display:none;">
<div class="rb_inp_cont">
<ul>
<input type="text" name="wr_3" value="<?php echo $write['wr_3'] ? $write['wr_3']:'이름' ?>" id="wr_3" required class="input required" maxlength="255" placeholder="이름">
<input type="text" name="wr_4" value="<?php echo $write['wr_4'] ? $write['wr_4']:'생년월일' ?>" id="wr_4" required class="input required" maxlength="255" placeholder="생년월일">
</ul>
</div>
</div>
<!-- 1 끝 -->
<!-- 2 -->
<div class="cat-form" data-cat="지역" style="display:none;">
<div class="rb_inp_cont">
<ul>
<input type="text" name="wr_5" value="<?php echo $write['wr_5'] ? $write['wr_5']:'주소' ?>" id="wr_5" required class="input required" maxlength="255" placeholder="주소">
<input type="text" name="wr_6" value="<?php echo $write['wr_6'] ? $write['wr_6']:'연락처' ?>" id="wr_6" required class="input required" maxlength="255" placeholder="연락처">
</ul>
</div>
</div>
<!-- 2 끝 -->
</div>
<script>
window.addEventListener("DOMContentLoaded", () => {
const select = document.querySelector("select[name='ca_name']");
const wrapper = document.getElementById("category-forms");
const forms = document.querySelectorAll(".cat-form");
const formElement = document.querySelector("form");
const toggleForm = (val) => {
if (!val) {
wrapper.style.display = "none";
// 선택 없음 시 모두 disabled 처리
forms.forEach(form => {
form.style.display = "none";
form.querySelectorAll("input, select, textarea").forEach(el => {
el.disabled = true;
});
});
return;
}
wrapper.style.display = "block";
forms.forEach(form => {
const isActive = form.dataset.cat === val;
form.style.display = isActive ? "block" : "none";
form.querySelectorAll("input, select, textarea").forEach(el => {
el.disabled = !isActive;
});
});
};
// 초기 표시
toggleForm(select?.value);
// 셀렉트 값 변경 시 동작
select?.addEventListener("change", e => toggleForm(e.target.value));
// 폼 제출 시에도 활성화 상태 유지
formElement?.addEventListener("submit", () => {
toggleForm(select?.value);
});
});
</script>
<!-- 여분필드끝 -->
채택 감사 합니다.
아래의 코드를 한번 참고를 해보시겠어요?
window.addEventListener("DOMContentLoaded", () => {
const select = document.querySelector("select[name='ca_name']");
const wrapper = document.getElementById("category-forms");
const forms = document.querySelectorAll(".cat-form");
const formElement = document.querySelector("form");
const toggleForm = (val) => {
if (!val) {
wrapper.style.display = "none";
// 선택 없음 시 모두 disabled 처리 및 required 제거
forms.forEach(form => {
form.style.display = "none";
form.querySelectorAll("input, select, textarea").forEach(el => {
el.disabled = true;
el.removeAttribute("required"); // required 속성 제거
});
});
return;
}
wrapper.style.display = "block";
forms.forEach(form => {
const isActive = form.dataset.cat === val;
form.style.display = isActive ? "block" : "none";
form.querySelectorAll("input, select, textarea").forEach(el => {
if (isActive) {
// 활성화된 폼의 경우
el.disabled = false;
// 원래 required 속성이 있었다면 다시 추가
if (el.classList.contains("required")) {
el.setAttribute("required", "required");
}
} else {
// 비활성화된 폼의 경우
el.disabled = true;
el.removeAttribute("required"); // required 속성 제거
}
});
});
};
// 초기 표시
toggleForm(select?.value);
// 셀렉트 값 변경 시 동작
select?.addEventListener("change", e => toggleForm(e.target.value));
// 폼 제출 직전에 한 번 더 처리 (안전장치)
formElement?.addEventListener("submit", (e) => {
// 현재 선택된 값 기준으로 다시 처리
const currentValue = select?.value;
forms.forEach(form => {
const isActive = form.dataset.cat === currentValue;
form.querySelectorAll("input, select, textarea").forEach(el => {
if (!isActive) {
el.removeAttribute("required");
el.disabled = true;
}
});
});
});
});
또는
// 방법 2: 폼 제출 시 비활성화된 필드들을 임시로 폼에서 제거
formElement?.addEventListener("submit", (e) => {
const hiddenInputs = [];
forms.forEach(form => {
if (form.style.display === "none") {
form.querySelectorAll("input").forEach(input => {
hiddenInputs.push({
element: input,
parent: input.parentNode
});
input.remove(); // 임시로 DOM에서 제거
});
}
});
// 폼 제출 후 다시 복원 (필요한 경우)
setTimeout(() => {
hiddenInputs.forEach(item => {
item.parent.appendChild(item.element);
});
}, 100);
});
답변감사합니다... 둘다 안되는거 같습니다..
필수가 아닌 경우,
required 를 삭제해야 합니다.