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 |
gocoder.htm▼ 소스설명
* 실패
- 아래 코드를 보시죠 테이블 안에 폼을 넣어서 사용하는 경우가 있습니다.
코드가 더 깔끔해 보여서죠. 그런데 저렇게 선언 후에 동적으로 인풋을
추가하면 결과 값에서 추가된 인풋의 값을 확인할 수 없습니다.
<table>
<form>
</form>
</table>
* 성공
- 아래처럼 폼 아래 테이블 태그가 존재해야 합니다.
<form>
<table>
</table>
</form>
캡쳐 화면으로 설명하겠습니다.
▼첫 번째 인풋에서 추가버튼을 눌러 동적으로 인풋을 추가하고 보내기 버튼을 눌러봤습니다.
▼ 정적으로 추가된 인풋 외에 나머지 값은 받아지지 않습니다.
심지어 URL에서도 보이지가 않네요
▼두 번째 인풋에서 똑같이 추가버튼을 눌러 동적으로 인풋을 추가하고 submit을 했습니다.
▼ URL에서도 배열로 인풋이 넘어갔고
배열로 인풋을 찎어보니 아까와 다르게 모두 넘어왔습니다.
아주 간단한 문제 때문에 삽질이 길었습니다.
아마도 브라우저 버전에 따라 허용도 될거 같지만
역시 기초가 탄탄해야 할거 같네요
마무리
이거 하나때메 몇시간을 손해봤네요
여러분은 헤매지 마시길
'IT_Developers > HTML' 카테고리의 다른 글
| HTML5 - Video 태그 사용하기 / 예제 (0) | 2018.12.26 |
|---|---|
| HTML - og(open graph) 태그 란? / 카톡,sns 미리보기 지정 (2) | 2018.04.26 |
| meta - X-UA-Compatible 태그 / 익스플로러 호환성 (0) | 2018.01.30 |
| Front- 프론트엔드 디자인 무료 공개소스 / codepen.io (0) | 2018.01.11 |
| HTML5 - meter , progress 태그 비교 (0) | 2017.12.15 |
댓글