如何根據條件比較兩個表單

我正在通過拖放設施創建表單，並將其保存在一個變量中。像下面如何根據條件比較兩個表單

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>';

當用戶通過我正在將其保存在另一個變量就像下面

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> ';

同樣的方式（拖放方式）編輯相同的形式，現在我的問題是我如何比較這兩個變量基於用戶已經添加/移除在上述情況下，任何輸入元件在編輯..

而編輯我已刪除名字輸入元件，從而它昭你可以說「你已經從表格中刪除了一個元素」。

我不知道是否有可能通過javascript/jquery或不？請指導我在此

感謝

來源

2014-02-11 Kalpit

爲什麼不在第二個變量中添加html之前比較（通過檢查控件的值）？這會更容易，而且會是正確的方式。 – P5Coder

我會創建一個輸入ID數組，並比較它們而不是試圖比較HTML字符串。 – Barmar

如果不是這樣，你仍然可以使用這兩個'html'創建一個JQuery變量，然後比較兩種形式的控件。 – P5Coder

首先打破它通過\ n形成線的陣列，然後比較兩者逐行然後，當你能夠找到差異然後找到匹配的行之間的差異最後顯示爲輸出。

來源

2014-02-11 11:58:43 Innovation

它應該只會在我添加/刪除任何輸入類型或textarea或readio按鈕時引發錯誤。它不應該引發錯誤，如果我要更改輸入名稱，ID或和div名稱或ID – Kalpit

我給出的解決方案可以爲任何情況編程。我使用此邏輯在前端設計了整個文件比較工具。 – Innovation

如果只有div S，input S，等，它們將被editted一些常見的控制，你可以做這樣的事情：

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...

或者你可以遍歷雙方的樹結構形式（使用上述方法）同時進行，直到發現一些變化或兒童結束。

來源

2014-02-11 12:09:56 P5Coder

請看看http://jsbin.com/loyuv/1/edit它不工作似乎使用類名 – Kalpit

如何根據條件比較兩個表單

回答

相關問題