2010-12-14 5 views
1

div 영역이있는 웹 페이지가 있습니다. 이 영역에는 두 가지 형태가있을 수 있습니다. 그것은 다음과 같습니다하나의 웹 페이지에서 두 개의 서식 처리

양식 1 :

<div id="data" ...> 
    <form action="/action1" method="post"> 
     <label for="label1">ID</label> 
     <input type="text" name="id" id="label1" value="" /> 
     <label for="label2">Name</label> 
     <input type="text" name="name" id="label2" value="" /> 
     <label for="label3">Description</label> 
     <input type="text" name="desc" id="label3" value="" /> 
     <label for="label4">Address</label> 
     <input type="text" name="address" id="label4" value="" /> 
    </form> 
</div> 

양식 2 :

<div id="data" ...> 
    <form action="/action2" method="post"> 
     <label for="label1">ID</label> 
     <input type="text" name="id" id="label1" value="" /> 
     <label for="label2">Firstname</label> 
     <input type="text" name="first" id="label2" value="" /> 
     <label for="label3">Lastname</label> 
     <input type="text" name="last" id="label3" value="" /> 
     <label for="label4">Address</label> 
     <input type="text" name="address" id="label4" value="" /> 
     <label for="label5">eMail</label> 
     <input type="text" name="mail" id="label5" value="" /> 
    </form> 
</div> 

그래서 두 가지 형태가있다. 값은 jQuery (백엔드에 대한 Ajax 호출)로 설정됩니다.

이 두 가지 양식을 처리하는 가장 좋은 방법은 무엇입니까? 양식만으로 두 개의 파일을 만들고 필요한 경우 양식을로드해야합니까? (폼 1은 버튼 1을 클릭하는 경우 필요하며, 버튼 2를 클릭하면 이벤트가 클라이언트 측에서 처리됩니다. 양식 2가 필요한 경우). 또는 두 양식을 단일 HTML 파일에 배치하고 양식을 사용하거나 사용 불가능하게 설정해야합니까?

+1

하나의 양식을 포함하고 특정 요소를 표시/숨기고 jQuery를 사용하여 양식 작업을 변경할 수도 있습니다. 두 가지 양식을 고수한다면 제이미의 대답이 두 번째입니다. :) –

답변

2

HTML에 두 양식이 있고 조건부로 숨기거나 활성 상태로 표시하는 것을 막을 수있는 방법은 없습니다. 가장 좋은 방법은 각 양식 (또는 포함 div)에 고유 한 ID를 지정하고 jQuery를 사용하여 표시/숨기기하는 것입니다.

2

두 페이지 모두 같은 페이지에 보관해야합니다. 요구 사항에 따라 필요한 양식을 표시하거나 숨 깁니다.

양식을 별도의 HTML 파일에 보관하고 사용자가 아무 버튼을 클릭하는 경우 양식의 HTML을 가져 오려면 XMLHttpRequest을 작성해야하지만이 추가 HTML 요청을 쉽게 피할 수 있기 때문에 동일한 페이지에있는 양식의 HTML.

귀하의 웹 사이트 잠재 고객이 너무 크거나 없는지 나는 알 수 없습니다. 그러나 단일 HttpRequest을 저장하는 것이 매우 유용합니다.

Minimize HTTP Requests by Yahoo developers을 참조하십시오. 그들은 분명히 HTTP 요청을 최소화 할 것을 제안합니다.

관련 문제