在执行AJAX之前检查表单字段中的更改 - Checking change in form field before executing AJAX

我的视图页面上有一个表单。。每当表单填充到页面上时。。它充满了旧的价值观。。。我的意思是输入框和复选框都有旧值。。。然后我通过ajax发布表单。。在发布后，如果值成功保存到数据库中，我会显示信息更新成功的消息，反之亦然。。。所以现在的问题是，例如，如果用户没有更改任何内容，文本框中的表单值是相同的，那么当用户按下保存按钮时，我不想向他显示信息已经更新，因为他什么都没做。。我想问一下在java脚本中是否可能。。。还是应该查询数据库并检查值是否相同？另一件事是，如果可以的话，该按钮保持禁用状态，直到他对任何表单字段进行了一些更改。。。

我不是在写整个代码，只是javascript部分

$("#submit").click(function(e){
    e.preventDefault();
    var name = $('#name').val();
    var email = $('#email').val();
    var password = $('#password-check').val();
    var oldpassword = $('#oldpassword').val();
    var timezone = $('#UserinfoTimezone').val();
    var alternate_email = $('#alternate_email').val();
    //var newsletter = $('#newsletter').val();
    var form_data = {
        name: $('#name').val(),
        email: $('#email').val(),
        password: $('#password-check').val(),
        oldpassword: $('#oldpassword').val(),
        timezone: $('#UserinfoTimezone').val(),
        alternate_email: $('#alternate_email').val(),
    };
    $.ajax({
        type:"POST",
        data:form_data,
        url:"https:/localhost/settings/",
        success : function(data) {
            alert("successfully data saved"):
        }
    });

您可以在填充表单中的字段时保存值…否则，您可以使用一个标志变量，该变量可以在每个字段的.change（）函数中给定一个值，并且可以在提交表单时检查该值。但我想第一个选项会更有效，因为即使用户编辑字段并输入相同的值，也会设置标志再一次

您可以将旧值保存在JavaScript中，并将其与提交处理程序中的当前值进行比较。如果没有任何变化，不要POST。

是的，您也可以在最初禁用保存按钮，并将onChange处理程序附加到表单字段，以便在这些字段的内容发生更改时启用保存按钮。

在ajax上，将输入值复制到某个属性，这样您就可以知道上次发送的数据。

$('#form input').each(function() {
 $(this).data('last-ajax-value', $(this).val());
});

当调用第二个ajax提交时，您可以检查这些值是否匹配并做出一些决定。

var someValueDiffers = false;
$('#form input').each(function() {
 if($(this).data('last-ajax-value') != $(this).val())
  someValueDiffers = true;
});
if(someValueDiffers)
 // Form changed
else
 // Form is the same

在页面加载中，您可以获取所有输入元素值，并将它们保存在单独的全局变量中。提交表单时，请将当前输入值与保存的旧值进行核对。如果任何一个不相等，用户已经更改了表单，您可以提交它。

var init_name = "";
var submit_flag   = false;
$(document).ready( function () {
 var init_name = $('#name').val();
 $("#submit").click(function(e){ 
     var name = $('#name').val();
     if(name == init_name) {
       // user has not changed
       submit_flag = false;
     } else {
       submit_flag = true;
     }
     if(submit_flag) {
        // call the ajax
     }
 })
})

实现这一点的一种简单方法。取消提交按钮。如果页面发生更改，则启用它。

提交ajax值后，需要清除输入字段值。

放置此代码而不是您的成功：

 ...
    success: function(data){
    alert("successfully data saved"):
     $('#myformid').find('input:text, input:password, input:file, select, textarea').val('');
      $('#myformid').find('input:radio, input:checkbox')
     .removeAttr('checked').removeAttr('selected');
    }

加载页面时，您可以取消设置输入值。

$(document).ready(function(){
   $("input").each(function(){
      $(this).val() = '';
   });
});