복잡한 양식을 HTML로 구조화하는 올바른 방법

Question

이것은 나를 미치게 만들고, 수 시간의 인터넷 검색과 RTFM은 도움이되지 못했습니다. 전문가들이 여러 부서에 분산되어있는 양식을 어떻게 처리 할 것인지 알아야합니다.

코드 (JSfiddle) : 나의 첫 번째 선택은 너무 같은 모든 div의 주위에 양식을 넣어, 그리고기도에 의지했다

<div class='A'> 
    <form id='fooForm' method='post' action='foo.php'> 
     <div class='B1'> 
     ... 
     </div> 
     <div class='B2'> 
     <div class='B2-1'> 
      ... 
     </div> 
     <div class='B2-2'> 
      ... 
     </div> 
     </div> 
    </form> 
</div> 

하지만이 함께

뭉쳐되는 모든 결과

결과 :

내가 대신하기로 결정 무슨 일을 이동했다 전자과 같이, 더미 형태로 밖으로 형성하고 나중에 값을 업데이트를 처리하고 jquery.submit 방법을 사용 :

는

코드 (JSfiddle) :

<div class='A'> 
    <div class='B1'> 
     ... 
    </div> 
    <div class='B2'> 
     <div class='B2-1'> 
     ... 
     </div> 
     <div class='B2-2'> 
     ... 
     </div> 
     ... 
    </div> 
</div> 
<form id='fooForm' method='post' action='foo.php'> 
</form> 

이 지금은 그것을 원하는 모습 볼

결과 :

하지만 지금 내가 가지고 t o 더미 input과 select 요소를 만들고 사용자가 변경 할 때마다 값을 업데이트하거나, form.submit을 호출하기 직전에이 작업을 수행하여 모든 값을 생성합니다. 내 질문에 jQuery의 post() 메서드를 사용하여 폼의 기능을 시뮬레이션 할 수 있는지 여부 양식이 서버에 자동으로 패키징하여 값을 보내는 이점을 제공한다고 이해하지만 너무 제한적입니다.

Answer 1

네, 원하는 경우 $ .post()를 사용하여 보낼 수 있습니다. 엄격하게 말하자면 양식 요소가 필요 없다고 말하면 함수에 올바른 데이터 객체 만 전달하면됩니다.

여전히 올바른 양식을 사용하려면 입력에서 값을 가져 오는 첫 번째 jquery serialize 메서드를 사용할 수 있습니다. http://api.jquery.com/serialize/

Answer 2

구조적으로 관련해서는을 사용하여 양식 내의 모든 것을 구조화합니다. 을 사용하십시오.

<form id="form1" > 
<ul> 
<li><input /></li> 
<li><select></li> 
</ul> 
</form> 

서버는 모든 형태의 소자를 전송 JQuery와 AJAX를 사용하여 형태 직렬화를 사용하여 양식을 제출한다.

및 페이지 사용의 상쾌한을 방지하기 event.preventDefault()

코드 :

$('#submit').on("click",function(event) { 
event.preventDefault(); 
$.post("url",$('#form-id').serialize(),function(data){}); } 
}