Проверьте, не изменены ли поля?

Question

У меня есть 7 текстовых полей, помещенных внутри таблицы. Эти данные текстовых полей я получаю от сервера, когда пользователь нажимает submit. После заполнения текстового поля выбитыми данными пользователь отправляет эти данные на сервер с новой кнопки submit.

Если пользователь отправляет данные как есть, мне нужно показать сообщение об ошибке «хотя бы одно поле должно быть отредактировано». Если он редактирует хотя бы одно поле и затем отправляет, я буду обновлять данные на сервере.

Как проверить, изменилось ли поле или нет?

Проблема в том, что мне нужно будет хранить данные для сравнения, которые мне придется делать в глобальной переменной в моем JavaScript (что не является хорошей практикой).

Answer 1

Вы можете создать скрытый вход (как говорят @ lastr2d2) назвал haschange как

<input type="hidden" name="haschange" id="haschange" value="0" /> 

и добавьте функцию jquery или javascript, чтобы изменить значение haschange от 0 до 1 когда происходит событие onChange на каждом textfields. Например, вы можете создать функцию, как ниже:

$(document).ready(function(){ 
    //Check this link 
    $("#textfields1").change(function(){ 
      $("#haschange").val(1); 
    }); 
}); 

Наконец при нажатии на кнопку, наконец, представить, то вы можете проверить, если haschange значение 0 или 1

--- Edit --- Если вы хотите проверить оригинальное изменение (см @antindexer комментариев), то вы можете использовать ниже код

$(document).ready(function(){ 
     //Check this link 
     $("#textfields1").change(function(){ 
      var defaultValue = document.getElementById('textfields1').defaultValue; 
      var currentValue = document.getElementById('textfields1').value; 
      if(currentValue != currentValue ) { 
       $("#haschange").val(1); 
      } 
     }); 
    }); 

Answer 2

Вы могли бы сделать что-то вроде этого:

Добавить данные атрибуты в полях ввода. Замените «<% = serverValue%>» на любой синтаксис, используемый вашим кодом сервера.

<form id="form"> 
    <table> 
    <tr> 
     <td><input type="text" value="<%= serverValue %>" data-original-value="<%= serverValue %>" /></td> 
    </tr> 
    </table> 
    <input type="submit" value="submit" /> 
</form> 

А затем поместить тег сценария на странице с чем-то вроде этого (при условии, что вы используете JQuery):

<script> 
    $(function() { 
    var $form = $('#form'); 
    $form.on('submit', function (e) { 
     $(form).find('[data-original-value]').each(function (index, el) { 
     var $el = $(el); 
     if ($el.val() === $el.attr('data-original-value]')) { 
      e.preventDefault(); 
      console.log('please edit at least one value'); 
     } 
     }); 
    }); 
    }); 
</script> 

Вот JSFiddle - http://jsfiddle.net/X4S4y/1/

Answer 3

вы можете использовать атр data-value (или любое имя, которое вы хотите), чтобы сохранить исходный Вэл у.е

Пример: (Предположим, что вы используете PHP)

<input type="text" value="<?php echo $value_1?>" data-value="<?php echo $value_1?>" class="input_text"> 
<input type="text" value="<?php echo $value_2?>" data-value="<?php echo $value_2?>" class="input_text"> 
<input type="text" value="<?php echo $value_3?>" data-value="<?php echo $value_3?>" class="input_text"> 
<input type="text" value="<?php echo $value_4?>" data-value="<?php echo $value_4?>" class="input_text"> 

В Jquery вы можете проверить, есть ли какие-либо изменения в входном тексте затем отправить форму

Пример:

$(document).ready(function(){ 
    $("form").submit(function(){ 
     var is_changed = false; 
     $(".input_text").each(function(){ 
     if ($(this).val() == $(this).attr("data-value") { 
       return false; 
     } else { 
       is_changed = true; 
     } 
     }); 
     if(is_change == true) { 
     alert("Please change at least one input"); 
     return false; 
     } 
    }); 
})