<s:form> 태그 <form> 태그로 변환 되었을 때의 id 속성 값의 변화

고객사 사이트에 문제가 발생했다. IE8 에서 호환성 보기를 했을 때 발생하는 문제 였는데, 내가 파악한 원인은 이렇다.

문제의 페이지에서는 사용자가 글을 등록하는 활동이 이루어진다. 

글을 등록하기 위해서 에디터가 사용되었고, 그 에디터와 관련된 스크립트에서는 "summary" 라는 id 속성 값으로 hidden type 의 input field 에 어떤 내용을 전달한다.

그리고  submit 이 일어 날 때, 스크립트에서는 이 hidden type 의 input field 에 내용이 있는지 없는지를 체크한다.

ㅈ ㅏ. 그렇다면 처음에 내가 생각했던 문제가 발생한 원인은 에디터에서 hidden field 에 데이터를 넘겨 주지 못 했거나, 제대로 넘겨 줬는데 스크립트에서 체크할 때 읽지 못했거나. 

문제가 되는 소스 부분은 다음과 같다.

#. Editor part

<div style="display:none;"><textarea id="content" name="content" wrap=on></textarea> </div>

<script type="text/javascript" language="javascript" >

            .......

            myeditor.inputForm = 'content';                     // 입력 textarea의 ID 이름입니다.

            myeditor.summaryForm = 'summary';

........

#. Tag part

<s:form name="thisForm" method="POST"  enctype="multipart/form-data" theme="simple">

            .......

           <s:hidden name="summary"/> 

#. Script part

var thisForm = document.getElementsByName("thisForm")[0];

........

if ( thisForm.content.value.trim() !=  "" && thisForm.content.value.length > 0 &&  thisForm.summary.value.trim() !=  "" && thisForm.summary.value.length > 0 ) {

........

thisForm.target = "hiddenFrame";

thisForm.action = "/service/uci/flash/uciWrite.action";

thisForm.cmd.value = "write";

thisForm.submit();

}  else {

alert( forum_message.input_content );

if ( myeditor ) {

            myeditor.editArea.focus();

}

}

그런데,

오류사항이 발생 했다는 메일과 함께 첨부되어 온 파일에는 웹브라우져에서 소스 보기 했을 때 보이는 코드들 이었는데 여기에서 이상한 것을 발견 했다.

#. Generated Tag part

<form id="uciWrite" name="thisForm" onsubmit="return true;" action="/service/uci/flash/uciWrite.action" method="POST" enctype="multipart/form-data">

                   .......

                   <input type="hidden" name="summary" value="" id="uciWrite_summary"/>

                   <input type="hidden" name="openYn" value="Y" id="uciWrite_openYn"/>

                   .......

위와 같이 변환된 코드에서는 hidden field 의  id 값이 form 태그의 id 값(이 id 값이 선언되지 않았을 경우, 자동으로 action 값이 id 값에 generate 되는 것으로 보임)과 각 field 의 name 속성 값이 '_'(underscore) 로 연결되어 생성된 것(uciWrite_summary)을 확인 할수 있다.

이와 같은 내용 검색 결과 스트러츠 태그를 사용했을 때 자동으로 처리되는 부분인 것 같았다.

※ 문제 해결 방법

1. 에디터 부분에서 호출하는 Id 값을 uciWrite_summary 으로 변경

2. <s:hidden name="summary"/> 이 generate 될 때 id 값이 "uciWrite_summary " 가 아닌 "summary" 가 되도록 처리.

1번은 다른 스크립트와 연관된 문제가 있기 때문에 2번을 선택 했다.

<s:hidden name="summary"/>  을 <s:hidden id="summary" name="summary"/> 로 변경 해 주면 된다.

But, 내가 검색했을 때는 저렇게 id 값을 선언해 주어도 generate 값으로 치환된다고 해서 실제적으로는  <input type="hidden" id="summary" name="summary"> 으로 처리했으나 실제 테스트 해 본 결과 자동 치환은 이루어 지지 않는 것으로 보인다.

◆ 부록 - Struts s:form tag : id 속성 선언에 따른 generate 결과

1. form 태그에 id와 name 속성 모두 안 주었을 때

Befor

After : action 값이 id 와 name 속성 값으로 들어간다.

2. form 태그에 name 속성만 주었을 때

Befor

After : action 값이 id 속성 값이 된다.

3. form 태그에 id 속성 값만 줬을 때

Before

After : id 속성 값이 name 속성 값으로 generate 된다는 새로운 사실.

4. form 태그에 id 와 name 속성 값 모두 주었을 때

Befor

After : 지정된 id 값으로 필드명이 지어진다.

5. form 태그에 id 값 주지 않고, 하위 field 에만 id 속성 값 주었을 때

Before

After

6. form 태그에  id 와 name 속성 값 주고, 하위 field 에 name 값 주었을 때

Before

After : field id 속성 값은 form 태그 id_fieldName 형태로 들어간다.

7. form 태그에  id 와 name 속성 값 주고, 하위 field 에 id 와  name 값 모두 주었을 때

Before

After