Проверьте, изменились ли значения веб-формы

Question

У меня есть многошаговая форма, и пользователь может перейти на любую страницу, чтобы изменить или добавить информацию.Существует меню, которое показывает текущий прогресс, шаги, выполненные пользователем, и позволяет перейти к любому завершенному или ожидающему шагу.

Несмотря на большую кнопку «Сохранить и продолжить», некоторые пользователи щелкают это менюдвигаться дальше.Я должен проверить - изменились ли значения в форме и спросить: «Сохранить изменения? Да / Нет».

Каким наилучшим образом (с минимальным клиентским JavaScript-кодом) вы предлагаете мне проверить, не изменились ли значения формы?

Отредактировано чуть позже:

Я забыл сказать, что многошаговая форма использует обратную передачу между шагами.

Answer 1

Плагин jQuery "Dirty Form" может помочь вам здесь:

http://plugins.jquery.com/project/dirtyform

Answer 2

Попробуйте проверить значения формы, как это. Вызов initFormChangeCheck () копирует все значения в зеркальный объект и устанавливает события mousedown и keydown для каждого элемента формы, вызывающего процедуру checkChange. Вы также можете проверить с интервалом.

var fList = new Object();
function initFormChangeCheck() {
  for (var fOi = 0; fOi < document.forms[0].elements.length; fOi++) {
    el = document.forms[0].elements[fOi];
    fList[el.name] = el.value;
    el.onmousedown = checkChange;
    el.onkeydown = checkChange;
  }
}
function checkChange() {
  var changed = false;
  for (var fOi = 0; fOi < document.forms[0].elements.length; fOi++) {
    el = document.forms[0].elements[fOi];
    if (fList[el.name] != el.value) {
      changed = true;
    }
  }
  document.forms[0].show_invoice.disabled = changed;
}

Питер Gotrendy News

Answer 3

Это не совсем легко без JQuery, потому что событие onchange для форм не всегда поддерживается во всех браузерах.

Я бы сказал, если можете, используйте один из плагинов jQuery, представленных в других ответах.

Если о jQuery не может быть и речи, рассмотрите возможность добавления простого onchange='if (this.value != this.defaultValue) dirty_flag = true;' к каждому элементу ввода. Если вы хотите чистый подход, сделайте это в <script> разделе:

document.getElementById("formid").onchange = 
 function() { if (this.value ....) }

Answer 4

Поскольку вы упомянули, что отправляете сообщения обратно между шагами, у меня есть скрытое поле, в котором хранится следующий шаг. По умолчанию это будет следующий шаг формы. Кнопка «Сохранить и продолжить» просто отправляет форму.

Затем каждый пункт меню устанавливает значение этой скрытой формы на соответствующий шаг, а затем отправляет форму. Что-то вроде:

<script type="text/javascript">
function goToStep(step) {
document.getElementById("hiddenFieldID").value = step;
document.getElementById("formID").submit();
}
</script>

<ul id="menu">
  <li><a href="javascript:goToStep(1);">Step 1</a></li>
  <li><a href="javascript:goToStep(2);">Step 2</a></li>
  etc...
</ul>

Answer 5

Плагин jQuery Form Wizard должен быть полезен в этом случае.

См. Демонстрацию здесь