Question

我正在研究像代码这样的计算器。用户将多次提交表单，我只需要在表单更改时存储计算结果。即，第一次用户点击＆＃34;计算＆＃34;按钮 - 向servlet发送指示，计算结果并将结果保存在DB中。如果用户点击＆＃34;计算＆＃34;再次按钮而不更改窗体中的任何字段 - 向servlet发送指示，表明未进行任何更改。

我尝试在表单上使用.serializeArray（），但它不起作用：每次点击＆＃34;计算＆＃34;按钮没有更改任何表单字段，它告诉我表单已更改...我很感激任何输入！

哦，由于某些原因，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是真的。

它还会更新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>

jquery表单更改验证不起作用

2 个答案: