비

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

· 2023-03-16 (목) 16:32:35 · 4593 · 4

5_1 편은 그냥 php 는 붙이지 않은 채 html 과 js 의 뼈다구 코드만 먼저 올릴게요.

나중에 처리할 때는 wr_5 의 type 을 hidden 으로 주고

뷰페이지에서는 여분필드를 | 으로 explode 해서 사용하면 됩니다.

코드를 째려보면서 이해하셨음 좋겠습니다.

5_2 에서 토탈소스를 짜면서 이 시리즈(?)를 마칠게요.

 

결과물은 https://wittazzurri.com/editor/html_editor.php 에서 확인하세요.

 

----------

 

보내는 코드

 

[code]

<input id="wr_5" name="wr_5">
<div id="wrDiv_5">
    <input value="봄">
    <input value="여름">
    <input value="가을">
    <input value="겨울">
</div>
<button onclick="btnClick()">클릭</button>
<script>
function btnClick() {
    for (i of wrDiv_5.querySelectorAll("input")) wr_5.value += (i.value + "|");
    wr_5.value = wr_5.value.slice(0, -1); 
}
</script>

[/code]

 

----------

 

받는 코드

 

[code]

<input id="wr_5" name="wr_5" value="봄|여름|가을|겨울">
<div id="wrDiv_5">
    <input>
    <input>
    <input>
    <input>
</div>
<script>
n = 0;
for (i of wrDiv_5.querySelectorAll("input")) i.value = wr_5.value.split("|")[n++];
</script>

[/code]

|

댓글 4개

감사합니다.
2023-03-16 (목) 23:55:00
@써맨 감사합니다
감사 합니다.
2023-03-17 (금) 09:58:58
@들레아빠 감사합니다.
댓글을 작성하시려면 로그인이 필요합니다.

그누보드5 팁자료실

2,788건
+
제목 글쓴이 날짜 조회
23-05-08 조회 5,208
23-05-04 조회 8,420
23-04-26 조회 4,987
23-04-24 조회 6,074
23-04-22 조회 4,942
23-04-22 조회 4,324
23-04-17 조회 5,329
23-04-16 조회 4,992
23-04-16 조회 4,899
23-04-15 조회 4,968
23-04-15 조회 7,059
23-04-14 조회 5,902
23-04-14 조회 4,975
23-04-13 조회 4,575
23-04-12 조회 5,012
23-04-11 조회 4,881
23-04-11 조회 4,338
23-04-09 조회 4,235
23-04-06 조회 5,325
23-04-05 조회 4,468
23-04-05 조회 4,052
23-04-03 조회 6,055
23-03-29 조회 4,038
23-03-29 조회 4,623
23-03-29 조회 4,636
23-03-29 조회 4,186
23-03-24 조회 4,064
23-03-23 조회 5,349
23-03-23 조회 4,852
23-03-16 조회 4,653