append innerhtml로 추가한 동적 Input이 결과 값에서 넘어오지 않을때

안녕하세요. 고코더 입니다.

최근에 아주 간단하고 복잡한 문제를 마주했습니다.
동적으로 추가한 인풋 박스가 결과 페이지에서 전송 받을 수가 없었습니다.

그럴리가 없는데 하면서 계속 시도했지만 
WAS 문제부터 서버스크립트 버전까지 다양하게 살펴봤지만
확인할 수 없는 오류였습니다.

그러던중 HTML 구조를 만지면서 테스트 한결과..
너무나 간단한 실수가 있었습니다.



▼아래 코드를 한번 테스트 테스트 해보시길 바랍니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
   <script type="text/javascript" src="http://www.kbs.co.kr/jquery/jquery-1.8.3.min.js"></script>
</head>
 
<script>
function falseIn(){
   
   var text = "<input type='text' name='gocoder[]' value='gc' />";
   $('#inHereFalse').append(text);
}
function trueIn(){
   
   var text = "<input type='text' name='gocoder[]' value='gc' />";
   $('#inHereTrue').append(text);
}
</script>
<body>
 
<table>
<form method='get' action='test_ok.php'>
   <input type='text' name='gocoder[]' value='gocoder' />
   <a href="javascript:falseIn();">추가</a>
   <input type="submit" value="안받아지는 보내기(X)">
   <div id="inHereFalse"></div>
</form>
</table>
 
 
<form method='get' action='test_ok.php'>
<table>
   <input type='text' name='gocoder[]' value='gocoder' />
   <a href="javascript:trueIn();">추가</a>
   <input type="submit" value="받아지는 보내기(O)">
   <div id="inHereTrue"></div>
</table>
</form>
  
</body>
</html>
cs


▼ 소스설명 
* 실패
- 아래 코드를 보시죠 테이블 안에 폼을 넣어서 사용하는 경우가 있습니다.
코드가 더 깔끔해 보여서죠. 그런데 저렇게 선언 후에 동적으로 인풋을
추가하면 결과 값에서 추가된 인풋의 값을 확인할 수 없습니다.
<table>
    <form> 
    </form>
</table>

* 성공
- 아래처럼 폼 아래 테이블 태그가 존재해야 합니다.
<form> 
    <table>
    </table>
</form>

캡쳐 화면으로 설명하겠습니다.

▼첫 번째 인풋에서 추가버튼을 눌러 동적으로 인풋을 추가하고 보내기 버튼을 눌러봤습니다.


▼ 정적으로 추가된 인풋 외에 나머지 값은 받아지지 않습니다. 
심지어 URL에서도 보이지가 않네요


▼두 번째 인풋에서 똑같이 추가버튼을 눌러 동적으로 인풋을 추가하고 submit을 했습니다.



▼ URL에서도 배열로 인풋이 넘어갔고 
배열로 인풋을 찎어보니 아까와 다르게 모두 넘어왔습니다.



아주 간단한 문제 때문에 삽질이 길었습니다.
아마도 브라우저 버전에 따라 허용도 될거 같지만

역시 기초가 탄탄해야 할거 같네요


마무리

이거 하나때메 몇시간을 손해봤네요
여러분은 헤매지 마시길


댓글을 달아 주세요

  • 좋은 글 감사합니다. 근데 저부분까지는 이해 했는데 출력 .. 2018.04.25 14:04  댓글주소  수정/삭제  댓글쓰기

    좋은글 감사합니다.

    해당 출력부분에서 막히네요.. 참고 할 수 있게 testok.php도 공유가 가능할 까요? ㅎ

    감사합니다/

    • Favicon of https://gocoder.tistory.com 고코더 2018.04.25 21:00 신고  댓글주소  수정/삭제

      안녕하세요 개발자님
      댓글 확인하자 마자
      블로그를 하나 썼습니다.
      -> http://gocoder.tistory.com/314
      확인해주시면 됩니다.

      즉 OK 페이지는
      print_r을 써서 결과 값을 확인한 페이지 입니다.

      testok_php 에 내용은
      아래와 같은 간단한 코드 입니다^^

      또 다른 궁금증 있으면 언제든지
      남겨주세요

      <?php
      echo print_r($_GET["gocoder"]);
      ?>

  • 좋은 글 감사합니다. 근데 저부분까지는 이해 했는데 출력 .. 2018.04.26 09:56  댓글주소  수정/삭제  댓글쓰기

    와우 감사합니다!! 고코더 님 덕분에 많은 도움이 되고 있습니다.

    정말 감사합니다!!

  • 한가지만 더 궁금한 사항이 있습니다. 2018.04.26 11:14  댓글주소  수정/삭제  댓글쓰기

    고코더님 덕분에 자동화업무를 위한 개발이 순탄하게 넘어가고 있습니다!! 정말 감사합니다.

    한가지 궁금한 사항이 있어서 문의 드립니다..

    위와 같이 echo print_r 로 결과값을 표출 했을 때에. 아래와 같이 결과 값이 나옵니다.
    -> Array ( [0] => gocoder [1] => gc [2] => gc ) 1

    제가 표현 하고 싶은 것은 표출 시 결과 값 (예 gc)에 대한 것만 표출 하고 싶은데. 어떤 코드를 짜야 하는지 알고 싶네요..
    즉 추가를 10개를 하던 100개를 하던 input에 입력된 값만을 불러 오고 싶습니다.

    ㅠㅠ 도와 주세요.. 감사합니다.

    • Favicon of https://gocoder.tistory.com 고코더 2018.04.26 12:54 신고  댓글주소  수정/삭제

      ^^ 열혈 코딩 중이시군요
      말씀하신 부분은
      배열을 담아 반복문으로 뿌려서
      값을 가져오시고 싶으신거 같습니다.

      아래 블로그를 남겨드렸습니다.

      http://gocoder.tistory.com/316

      블로그 내용처럼 아래 같은 소스를 원하시는게 맞는지
      궁금하네요

      <?php

      for($i = 0; $i < count($_GET["gocoder"]); $i++) {
      echo $i."번째 value 값 :".$_GET["gocoder"][$i]."<Br>";
      }

      ?>

  • 아.. 2018.05.25 12:40  댓글주소  수정/삭제  댓글쓰기

    진짜.. 이것 때문에 이틀 날렸는데.. 이런 문제였다니..
    속이 시원하기도 하고, 어이 없기도 하고.. ^^
    감사합니다.

  • 감사감사 2018.09.12 15:15  댓글주소  수정/삭제  댓글쓰기

    감사합니다. 덕분에 5분만에 찾았습니다.
    다른분들 처럼 몇시간 / 몇일 날릴뻔 했네요.

  • 굿스 2019.02.21 17:24  댓글주소  수정/삭제  댓글쓰기

    정말 감사합니다. 평소 form을 밖으로 하는경우 공백이 생기는 현상이 있어 테이블에 포함을 해서 사용을 했엇는데요

    현재 같은 문제가있는지는 몰랏네요

    완전 도움이되었습니다.

    감사합니다.

  • 오버로더 2019.07.08 13:42  댓글주소  수정/삭제  댓글쓰기

    정말 감사합니다.

    이것때문에 몇시간 삽질하고 있었는데 바로 해결이 되네요.
    table 안에 form을 넣으니 동적으로 생성된것 값이 넘어가지지 않더라구요.
    위에 내용대로 table 밖에 form을 감싸니 문제가 해결되었습니다.

  • 테스트 2020.02.25 15:42  댓글주소  수정/삭제  댓글쓰기

    좋은글 감사합니다. 덕분에 잘 해결 되었네요^^