javascript - jquery 表单更改验证不起作用

Question

我正在编写类似计算器的代码。用户将多次提交表单，只有在表单更改时我才需要存储计算结果。即，用户第一次单击“计算”按钮 - 向 servlet 发送指示，计算结果并将结果保存在数据库中。如果用户再次单击“计算”按钮而不更改表单中的任何字段 - 向 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，以便在提交后它成为新的基线。