조건을 기반으로 두 가지 양식을 비교하는 방법

Question

나는 끌어서 놓기 기능을 통해 양식을 만들고 있는데 하나의 변수에 저장하고 있습니다. 내가 두 변수를 비교 어떻게 사용자가 내가

var editform = '<form method="POST" name="1" class="form-horizontal wpc_contact" novalidate="novalidate">      

<div class="controls" style="border:0px"> 
    <input type="text" placeholder="Enter Last Name" name="Last Name" class="input-xlarge" req="no">   
</div>       

<div class="controls" style="border:0px" name="Contact time" req="yes">   
    <label class="checkbox inline">   
     <input type="checkbox" value="Day" name="Contact time" id="Contact time_0" req="yes">Day   
    </label>   
    <label class="checkbox inline">   
     <input type="checkbox" value="Night" name="Contact time" id="Contact time_1" req="yes">Night 
    </label>   
    <label class="checkbox inline">   
     <input type="checkbox" value="Any" name="Contact time" id="Contact time_2" req="yes"> Any  
    </label>  
</div>      

<div class="controls" style="border:0px"> 
    <textarea style="min-height: 100px" placeholder="Enter Message" class="input-xlarge" req="yes" name="Message"> 
    </textarea>        
</div>      

<div class="controls" style="border:0px">  
    <button class="btn btn-success">Send</button>  
</div>     
</form> '; 

을 다음과 같이 다른 변수에 저장하고 같은 방법으로 (드래그 앤 드롭 방식)을 통해 동일한 양식을 편집 할 때

var addform = '<form method="POST" name="1" class="form-horizontal wpc_contact" novalidate="novalidate">       
    <div class="controls" style="border:0px"> 
    <input type="text" placeholder="Enter First Name" class="input-xlarge" req="yes" name="First Name"> 
    </div> 

    <div class="controls" style="border:0px">  
    <input type="text" placeholder="Enter Last Name" name="Last Name" class="input-xlarge" req="no">   
    </div>       

    <div class="controls" style="border:0px" name="Contact time" req="yes">   
    <label class="checkbox inline">   
     <input type="checkbox" value="Day" name="Contact time" id="Contact time_0" req="yes">Day   
    </label>   
    <label class="checkbox inline">   
     <input type="checkbox" value="Night" name="Contact time" id="Contact time_1" req="yes">Night 
    </label>   
    <label class="checkbox inline">   
     <input type="checkbox" value="Any" name="Contact time" id="Contact time_2" req="yes"> Any  
    </label>  
    </div>      

    <div class="controls" style="border:0px"> 
    <textarea style="min-height: 100px" placeholder="Enter Message" class="input-xlarge" req="yes" name="Message"> 
    </textarea>        
    </div>      

    <div class="controls" style="border:0px">  
    <button class="btn btn-success">Send</button>  
    </div>     
</form>'; 

을 다음과 같이 이제 제 질문은 사용자에 기초 편집 제가 그것이 SHO 있도록 이름 입력 요소를 제거한 상태/추가에게 상기 경우에 어떤 입력 요소 수정할 때 ..

을 제거한 uld는 "양식에서 요소 하나를 제거했습니다"라고 말합니다..

나는 자바 스크립트/jquery를 통해 가능한지 모르겠다.

Answer 1

먼저 라인의 배열을 형성하기 위해 \ n을하여 휴식 한 다음 라인을 다음 라인으로하고 모두 비교이

덕분에 나를 인도하십시오 때 다음 타의 추종을 불허하는 라인의 차이를 찾을 수있는 차이를 발견 할 수 마지막으로 출력으로 표시합니다.

var form1 = $(addform); 
var form2 = $(editform); 
if(form1.find('div').length != form2.find('div').length) 
    alert('There is change in number of divs.'); 
// and so on... 

또는 당신은 모두의 트리 구조를 탐색 할 수 있습니다 등 만 div의, input의, 편집 해 될 것 몇 가지 공통적 인 컨트롤이있는 경우

Answer 2

, 당신은 이런 식으로 뭔가를 할 수 아동의 변화가 발견되거나 끝날 때까지 (위의 방법을 사용하여) 양식을 작성하십시오.