jQuery - предотвращение отправки несохраненных форм

Question

У меня есть таблица клиентов, в каждой строке есть метод, который выскакивает во встроенную форму, отображая сведения о клиентах. Также на этой странице есть поиск, некоторые вкладки и некоторые ссылки и функции href.

Что я пытаюсь сделать, это запретить пользователю оставлять эту форму в несохраненном состоянии. поэтому у меня переменная formChanged установлена ​​в TRUE при изменении ввода формы или вставке. ЕСЛИ formChanged == true, то я не хочу, чтобы пользователь мог щелкнуть ссылку или выполнить поиск, пока не подтвердит, сохранять данные или нет.

Я использую следующее, чтобы предложить пользователю:

    $(document).click(function(eve) {
    if (!$(eve.target).is('#form *')) {
       if (formChanged) { 
           if (confirm("Do you want to save the data or continue to edit?")) {
                   $('#form').submit();
                   return true;
               }
           else { return false; } //here I do not want to submit the form OR continue with the openForm() method;
       }
    }
});

HTML-разметка (упрощенная) выглядит следующим образом:

<a href="/new">New Customer</a>
<a href="javascript:performSearch();">Search</a>
<table>
    <tr>
      <td onclick="openForm(1);">Customer One</td>
    </tr>
    <tr>
      <td onclick="openForm(2);">Customer Two</td>
    </tr>
    <tr>
        <td><form> //form gubbins loaded via ajax in here </form></td>
     <tr>
      <td onclick="openForm(2);">Customer Two</td>
    </tr>
</table>

Проблема, с которой я столкнулся, заключается в том, что я могу перехватить логику подтверждения, но другие функции, такие как openForm & executeSearch (), по-прежнему продолжают выполняться.

В идеале я хотел бы ТОЛЬКО запускать функции / следовать по URL, если пользователь выбирает СОХРАНИТЬ, и ничего не делать, если пользователь нажал ОТМЕНА.

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

Answer 1

Обновление

Я не знаю, есть ли лучший шаблон или какой-либо существующий метод, который вы могли бы использовать, но пока кто-то не отправит лучший ответ, вот что у меня есть.Вы можете написать делегирующий метод, который будет вызываться повсеместно и в качестве аргументов, будет дана вызываемая функция и аргументы для этой функции.Он может проверить, была ли форма изменена - если нет, он вызовет соответствующую функцию, в противном случае он предложит пользователю.Примерно так:

<a href="/new">New Customer</a>
<a href="javascript:check(performSearch);">Search</a>
<table>
    <tr>
      <td onclick="check(openForm,1);">Customer One</td>
    </tr>
    <tr>
      <td onclick="check(openForm, 2);">Customer Two</td>
    </tr>
    <tr>
        <td><form> //form gubbins loaded via ajax in here </form></td>
     <tr>
      <td onclick="check(openForm, 2);">Customer Two</td>
    </tr>
</table>

Функция check может выглядеть следующим образом (в ее текущей форме она действительно упрощена и работает только с одним аргументом для функции, которая будет вызываться, но ее можно сделать более общей).):

function check(func, param){
    if (!formChanged){
        func(param); //invoke the original function 
    }
    else{
      //handle the case for a modified form that the user wants to leave
    }
}

Вероятно, вы могли бы сделать это гораздо чище, если бы вы прикрепляли свои обработчики событий через JavaScript, а не указывали их в HTML - принцип ненавязчивого JavaScript отделения разметки от поведения

---

Звучит так, будто вы ищете window.onbeforeunload

Answer 2

Возможно, вы хотите что-то вроде этого: Javascript - подтверждение при выходе со страницы

Вместо if(disabledConfirm_exit) return; в последнем разделе кода, проверьте переменную formChanged.

В jQuery - вы можете использовать это: http://api.jquery.com/unload/