Вставка «успешных» кнопок при вызове form.submit ()

Question

Я работаю над веб-интерфейсом продукта, похожего на устройство.

У меня есть HTML-форма, которая отлично работает: она показывает список вещей с флажками, пользователь проверяет некоторые из них и нажимает кнопку «удалить», которая отправляет форму. Сервер получает сообщение POST, удаляет элементы и обновляет страницу. Все хорошо.

Требуется добавить "Вы уверены?" подтверждение к форме. Если я добавлю вызов на

 confirm("are you sure?");

в качестве метода onsubmit в теге FORM или щелчка в теге кнопки submit, он работает нормально, но использует уродливое диалоговое окно подтверждения браузера.

В другом месте продукта у нас есть хороший настраиваемый диалог подтверждения в стиле CSS, который я хотел бы использовать, но он работает так: В соответствующем месте вы вызываете

myConfirm("Confirm", "Are you sure", "Yes", "No", confirmCallback);

Это создает маску кликов, настраивает диалог, центрирует и отображает его, а затем возвращает FALSE, а форма не отправляется.

Позже, когда пользователь решает, если он нажимает «Да», он вызывает функцию verifyCallback. На других страницах продукта, основанных на Ajax, он собирает информацию, создает postBody и использует объект Ajax Prototype для его публикации, и все в порядке. (Если «Нет», диалоговое окно и маска клика удаляются и все продолжается.)

На этой более простой странице с чистой HTML-формой у меня есть функция verifyCallback, которая выглядит следующим образом:

var confirmCallback = function() {
    document.myForm.submit();
}

и он срабатывает ОК, но когда форма отправлена, кнопка удаления уже нажата, и ложное значение, возвращаемое пользовательским подтверждением, подавляет отправку. Вместо этого это считается новой отправкой, а кнопка удаления фактически не была нажата, поэтому она не считается "успешной" с точки зрения стандартного раздела W3.org HTML 4 17.13.3. Сервер получает данные, кнопка удаления отсутствует, говорит: «Я получил это, но я не знаю, что вы хотите, чтобы я с ним сделал» и просто ничего не делает, только обслуживает следующую страницу.

Если вы прочитали это далеко, СПАСИБО, и вот мой актуальный вопрос. Как я могу в своей функции JavaScript JavaScript connectCallback кросс-браузерным способом заставить кнопку удаления сработать, стать «успешной» и отправить вместе с остальными данными?

Answer 1

Если предположить, что кнопка удаления является кнопкой отправки для этой формы, то, вероятно, самое простое решение - присвоить форме идентификатор

<form id="submitForm"...

Затем в подтверждении позвоните по форме отправки

document.getElementById("submitForm").submit()

Я думаю, что это будет делать то, что вы просите, но похоже, что вы уже достаточно хорошо подошли к этому решению, поэтому, если вы спрашиваете что-то еще, дайте мне знать.

Answer 2

Похоже, вам понадобится скрытое поле, чтобы притвориться нажатой кнопкой, и для каждой кнопки не требуется имя, а вместо этого событие onclick для манипулирования значением скрытого поля.

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

Если вам требуется, чтобы это решение по-прежнему работало без JS, то вам может потребоваться немного поиграться с логикой JS (чтобы внести дополнительные изменения в исходное дерево DOM) или изменить код сервера. Вы могли бы даже вставить в ответ поведение «Вы уверены» ...

Answer 3

В вашем обратном вызове удалите обработчик onclick для кнопки (вызывая подтверждение), затем нажмите кнопку на кнопке. Это приведет к тому, что нажатие кнопки приведет к отправке формы, в результате чего кнопка будет отправлена ​​обратно вместе с данными формы.

var confirmCallback = function() {
    $('submitButton').stopObserving('click');
    $('submitButton').click();
}