submit할 때 여러 폼의 데이터를 같은 곳으로 한번에 넘기려고 합니다.

http://okky.kr/article/298931

안녕하세요~
한 페이지에 여러 폼이 있고 서브밋을 할 때 한 곳으로 데이터를 넘기려고 합니다.

밑에 요약..?해서 소스를 적어뒀는데요..
스프링 폼태그안에 폼이 3개가 있습니다.
안에 들어있는 각각의 폼은 작동을 합니다.

실행 후에 얻은 값을 스프링폼을 서브밋시킬 때 같이 넘기고 싶은데요..

(현재는 안에 들어있는 폼의 값 빼고 다 넘어가고 있습니다.)

데이터를 한곳으로 모으는 방법을 모르겠습니다..

 

<script type="text/javascript">

$(document).ready(function(){

// 회원정보수정

$(".excuteBtn").on("click",function(){

   var frm = document.theForm;

    frm.acceptCharset = 'utf-8';

    if(document.all)document.charset = 'utf-8'; 

    frm.submit();

});

</script>

<form:form commandName="theForm" name="theForm" action="info_save.da" method="get">

<form:hidden path="user_key"/>

<form:hidden path="user_id"/>

  <form>

    <img id="logoImageArea" src="${uploadDefaultUrl}/${theForm.logo_image}" alt=""/>

  </form>

  <form>

    <img src="${uploadDefaultUrl}/${uploadImgThumbDir}${data.image_info}" />

  </form>

  <form>

    <input type="file" id="dentalCertBlob" name="upload"onchange="javascript:$('#dentalCertForm').submit();" />

</form>

</form:form>

<a href="javascript:;" class="excuteBtn">저장</a>

질문1. form:form과 form을 함께 사용할 수 없나요?

질문2. form의 데이터를 다른 form으로(from:form) 넘기는 방법이 어떤 것있나요? 

- 자바스크립트에서 다른 폼의 데이터를 더하는 방법이 있을까요?

- <form:hidden path="user_key"/> 이런 식으로 다른 폼의 값을 받아와서 넘길 수는 없을까요?

감사합니다.

---

질문2

한번에 넘기는다는게 한번의 함수 실행으로 3개의 form 값을 submit() 한다는건가요?

이 경우는 form 옵션에 target를 주면 될것 같고

그게 아니라 3개의 form값을 합쳐서 넘기는 거면 form serialize() 활용해서 조합하면 될것 같기도 합니다

---

질문1. form:form과 form을 함께 사용할 수 없나요?

form 안에 form은 들어갈 수 없습니다. 그러므로 form:form 안에 form 을 집어 넣으면 작동이 안됩니다.

---

form 안에 또 form 이 들어가는것은 html 스펙에 맞지 않는 걸꺼예요.

찾아보니

http://stackoverflow.com/questions/379610/can-you-nest-html-forms 

이런 글이 있네요. 이건 html5 관련 내용인데, html4 도 비슷할 듯 합니다.

---

브라우저 별로, 폼에 접근이 안되거나. 안쪽폼으로만 접근하거나, 바깥쪽 폼으로만 접근하거나 하는 식으로 정상적인 동작 보장이 안됩니다.

---

답변 감사합니다.

<form:form>

<form:hidden path="user_key"/>

<form:hidden path="user_id"/>

<form:hidden path="logoImageArea" value="${theForm.logo_image}"/>

<form:hidden path="dentalCertBlob"/>

</form:form>

 <form>

    <img id="logoImageArea" src="${uploadDefaultUrl}/${theForm.logo_image}" alt=""/>

  </form>

  <form>

    <img src="${uploadDefaultUrl}/${uploadImgThumbDir}${data.image_info}" />

  </form>

  <form>

    <input type="file" id="dentalCertBlob" name="upload"onchange="javascript:$('#dentalCertForm').submit();" />

</form>

대충이런식으로 해결했습니다..