jQuery表單更改驗證不起作用

Question

我正在使用類似代碼的計算器。 用戶將多次提交表單，並且僅當表單更改時，我才需要存儲計算結果。 即，第一次用戶單擊“計算”按鈕-將指示發送到servlet，計算結果並將結果保存在DB中。 如果用戶再次單擊“計算”按鈕而未更改表單中的任何字段，請向Servlet發送指示未進行任何表單更改的指示。

我嘗試在表單上使用.serializeArray（），但是它不起作用：每次我單擊“計算”按鈕時都沒有更改任何表單字段，它告訴我表單已更改...感謝任何輸入！

哦，由於某種原因，jsfiddle示例不會觸發計算點擊，但會在本地為我工作。 https://jsfiddle.net/oqqbhjve/4/

我的HTML：

<form id="myForm" method="POST">
   <input id="field1" name="field1" maxlength="4" type="text" />
   <br />
   <select name="field2" >
      <option value="0" selected>- Select Brand</option>
      <option value="1">Description 1</option>
      <option value="2">Description 2</option>
   </select>
   <br /><br />
   <div id="results">   
     <input id="calculate" type="button" name="calculate" value="Calculate" />
     <input id="reset" type="reset" name="reset" value="Reset" />
   </div>
</form>

我的jQuery：

$(document).ready(function() {

   var form_changed = "No";
   var form_original_data = $("#myForm").serializeArray(); 

   $('#calculate').click(function() {

   var data = $('#myForm').serializeArray();

   if ($("#myForm").serializeArray() != form_original_data) {
      form_changed = "Yes";
   }
   alert(form_changed);

   $.ajax({
      type:"POST",
      url:"myServlet",
      data:data,
      cache: false,
      success:function(html)
   {
      $("#results").hide();
      $("#results").html(html).fadeIn("slow");
   }
   });
});
});

Answer 1

https://jsfiddle.net/oqqbhjve/17/

$(function() {
    var $form = $('#myForm'),
        form_original_data = $form.serializeArray(),
        original_data_string = JSON.stringify(form_original_data);

    $('#calculate').on('click', function() {
        var form_current_data = $form.serializeArray(),
            current_data_string = JSON.stringify(form_current_data),
            form_changed = (current_data_string !== original_data_string);

        console.log(form_changed);

        if (form_changed) {
            original_data_string = current_data_string;

            $.ajax({
                type: "POST",
                url: "myServlet",
                data: form_current_data,
                cache: false,
                success: function(html) {
                    //$("#results").hide();
                    //$("#results").html(html).fadeIn("slow");
                }
            });
        }
    });
});

以上僅在表單更改時提交。 因此，如果提交您的后端，則可以假設form_changed為true。

它還會更新original_data_string，以便在提交后成為新的基線。

Answer 2

我的建議是檢查輸入字段更改事件：

 $(function () { var form_changed = "No"; var form_original_data = $("#myForm").serializeArray(); $("form :input").change(function() { form_changed = "Yes"; }); $("#reset").click(function(e) { form_changed = "No"; }); $('#calculate').click(function() { var data = $('#myForm').serializeArray(); $('#alert').text(form_changed); $.ajax({ type:"POST", url:"myServlet", data:data, cache: false, success:function(html) { $("#results").hide(); $("#results").html(html).fadeIn("slow"); } }); }); }); 

 <script src="http://code.jquery.com/jquery-1.11.3.js"></script> <form id="myForm" method="POST"> <input id="field1" name="field1" maxlength="4" type="text" /> <br /> <select name="field2" > <option value="0" selected>- Select Brand</option> <option value="1">Description 1</option> <option value="2">Description 2</option> </select> <br /><br /> <div id="results"> <input id="calculate" type="button" name="calculate" value="Calculate" /> <input id="reset" type="reset" name="reset" value="Reset" /> </div> </form> <p id="alert"></p>