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

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

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

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

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

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

Ответы

Ответ 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

Ответ 3

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

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

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

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

Ответ 5

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

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

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