Question

我在我的视图页面上有一个表单..每当表单填充在页面上..它都填充了旧值...我的意思是输入框和复选框有旧值...然后我发布表单通过ajax ..发布后如果值成功保存到数据库中我显示信息已成功更新，反之亦然......所以现在的问题是，如果例如用户不更改任何内容，则表单中的表单值相同-boxes然后当用户按下保存按钮我不想告诉他信息已更新，因为他没有做任何事情..我想问这是否可能在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"):
        }
    });

Answer 1

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

Answer 2

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

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

Answer 3

在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

Answer 4

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

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
     }
 })
})

Answer 5

提交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');
    }

Answer 6

实现这一目标的一种简单方法。禁用提交按钮。如果在页面上进行了更改，请启用它。

Answer 7

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

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

在执行AJAX之前检查表单字段中的更改

7 个答案: