그누보드 - 5_2 : 게시판 여분필드와 자바스크립트 : 배열쪼개기(2)

5_2 : 게시판 여분필드와 자바스크립트 : 배열쪼개기(2) 정보

5_2 : 게시판 여분필드와 자바스크립트 : 배열쪼개기(2)

본문

드디어 이 시리즈의 마지막입니다.

1편 - https://sir.kr/g5_tip/20120
2편 - https://sir.kr/g5_tip/20129
3편 - https://sir.kr/g5_tip/20147
4편 - https://sir.kr/g5_tip/20189
5_1편 : https://sir.kr/g5_tip/20192

그리고 5_1편의 연속입니다.

----------

자바스크립트로 배열을 쪼개면 굳이 업데이트 파일이 필요없습니다.

왜냐하면 쪼갠 결과물을 폼의 onsubmit 이벤트에 실어주기만 하면 되니까요.

하...지...만... onsubmit 이벤트에는 이미 다른 명령어가 탑재되어 있습니다.

그래서 기존의 명령어를 고쳐주어야 하기 때문에 원본을 수정해야 하는 일이 생기죠.

그래서 onsubmit 가 아닌 폼전송을 담당하는 버튼에 onclick 이벤트로 명령어를 분기해야

원본을 고치지 않아도 됩니다.

아래 그림의 작성완료 버튼이 그것이며

이 버튼의 아이디는 btn_submit 라는 것을 알고 있다는 전제가 필요합니다.

31845957_1678969382.7648.jpg

----------

아래에서 html 은 write.skin.php 의 적당 위치에 주고

스크립트는 반드시 btn_submit 의 하단에 위치해야 합니다.


<input type="hidden" id="wr_5" name="wr_5">
<div id="wrDiv_5">
    <input>
    <input>
    <input>
    <input>
</div>
.
.
.
<script>
wr_5.value = "<?php echo $write['wr_5']; ?>";
n = 0;
for (i of wrDiv_5.querySelectorAll("input")) {
    i.value = wr_5.value.split("|")[n++];
    i.value = i.value === "undefined" ? "" : i.value;
}
btn_submit.onclick = function() {
    wr_5.value = "";
    for (i of wrDiv_5.querySelectorAll("input")) wr_5.value += (i.value + "|");
    wr_5.value = wr_5.value.slice(0, -1); 
}
</script>

----------

write.skin.php 를 건드리지 않고 pc basic 스킨의 write.tail.skin.php 에서 표현하려면 아래처럼요.


<script>
wrText_5 = `
    <input type="hidden" id="wr_5" name="wr_5">
    <div id="wrDiv_5">
        <input>
        <input>
        <input>
        <input>
    </div>
`;
document.querySelector("#bo_w .bo_w_tit").insertAdjacentHTML("afterend", wrText_5);
wr_5.value = "<?php echo $write['wr_5']; ?>";
n = 0;
for (i of wrDiv_5.querySelectorAll("input")) {
    i.value = wr_5.value.split("|")[n++];
    i.value = i.value === "undefined" ? "" : i.value;
}
btn_submit.onclick = function() {
    wr_5.value = "";
    for (i of wrDiv_5.querySelectorAll("input")) wr_5.value += (i.value + "|");
    wr_5.value = wr_5.value.slice(0, -1); 
}
</script>

31845957_1678969698.5492.jpg