如果隱藏提交的值更改，則保存按鈕應啓用。如果輸入相同的值，保存按鈕應再次禁用

Question

我打算根據表單元素的更改禁用/啓用保存按鈕。 但是當隱藏的輸入字段值通過按鈕選擇彈出時，保存按鈕不受影響。

以下是我的代碼。 我想序列化舊的表單值，並與更改後的表單值進行比較。但隱藏的字段值不能被序列化我猜。

function toggleSave() { 
      $('form') 
      .each(function() { 
       $(this).data('serialized', $(this).serialize()) 
      }) 
      .on('change input', function() { 
       $(this) 
        .find('button.Save') 
         .prop('disabled', $(this).serialize() == $(this).data('serialized')) 
       ; 
      }) 
      .find('button.Save') 
       .prop('disabled', true); 

     } 

下面的代碼適用於除隱藏字段以外的所有表單。 有人可以提出一個解決方案。

注：隱藏字段通過一個按鈕來填充點擊選擇彈出窗口標題## ##

Answer 1

這個問題似乎更多的是關於試圖捕捉的規劃變化，而不是改變一個隱藏字段。

作爲answer here states，編程式更改不能由.on('change'偵聽器捕獲。當您更改其值時，您可以通過javascript在隱藏字段上「手動」觸發更改事件。

我沒有看到你的問題，更新隱藏的輸入而手動調用改變事件的例子的JavaScript（這應該爲你工作）是：

$('input:hidden').val('a new value').change();

Answer 2

當輸入字段從另一個函數的輸入事件偵聽器不起作用改變。 如果您想輸入您的輸入功能，您需要自己觸發此事件。在下面的代碼片段中，您可以驗證是否在單擊您在函數中輸入的第三個按鈕後觸發事件輸入。

var inputHiddenFields = 0; 
 
$(function() { 
 
    // count the number of hidden input fields 
 
    inputHiddenFields = $('form :hidden').length; 
 
    $('form').find('button.Save').prop('disabled', true); 
 

 
    // set each hidden input data attribute isChanged to false 
 
    $('form :hidden').each(function(index, ele) { 
 
    $(this).data('isChanged', false); 
 
    }); 
 

 
    $('form :hidden').on('input', function (e) { 
 
    // set data attribute isChanged to true 
 
    $(this).data('isChanged', true); 
 

 
    // count the number of hidden input fields with data attribute isChanged set to true 
 
    var changedInputHiddenFields = $('form :hidden').filter(function(index, ele) { 
 
     return $(this).data('isChanged'); 
 
    }).length; 
 

 
    // compare the number of all hidden input fields with changed one 
 
    $(this).parent().find('button.Save').prop('disabled', inputHiddenFields != changedInputHiddenFields); 
 
    }); 
 

 
    $('#clickme').on('click', function(e) { 
 
    $('#input2').val('test'); 
 
    }); 
 

 
    $('#clickmeandtrigger').on('click', function(e) { 
 
    $('#input2').val('test').trigger('input'); 
 
    }); 
 
});

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
 

 

 
<form action="z.html"> 
 
    <input type="text" id="input1" name="input1"> 
 
    <input type="hidden" id="input2" name="input1"> 
 
    <button class="Save">Save</button> 
 
</form> 
 
<button id="clickme">Click Me</button> 
 
<button id="clickmeandtrigger">Click Me And Trigger</button>