Включая кнопки “успешно” при вызове form.submit()

Question

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

У меня есть HTML-форма, которая работает нормально:он показывает список объектов с флажками, пользователь проверяет некоторые из них и нажимает кнопку "удалить", которая отправляет форму.Сервер получает СООБЩЕНИЕ, удаляет элементы и обновляет страницу.Все в порядке.

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

 confirm("are you sure?");

как метод onsubmit в теге ФОРМЫ или onclick в теге кнопки отправки, он работает нормально, но использует уродливое встроенное в браузер диалоговое окно подтверждения.

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

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

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

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

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

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

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

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

Answer 1

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

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

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

Answer 2

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

<form id="submitForm"...

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

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

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

Answer 3

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

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