Incluyendo botones "exitosos" al llamar a form.submit ()

Question

Estoy trabajando en la GUI web de un producto similar a un dispositivo.

Tengo un formulario HTML que funciona bien: muestra una lista de cosas con casillas de verificación, el usuario verifica algunas de ellas y hace clic en " eliminar " botón que envía el formulario. El servidor obtiene la POST, elimina los elementos y actualiza la página. Todo bien.

Hay un requisito para agregar un " ¿estás seguro? " confirmación al formulario. Si agrego una llamada a

 confirm("are you sure?");

como método de envío en la etiqueta FORM, o al hacer clic en la etiqueta del botón Enviar, funciona bien pero utiliza el feo diálogo de confirmación nativo del navegador.

En otra parte del producto, tenemos un bonito cuadro de diálogo de confirmación personalizado con estilo CSS que me gustaría usar, pero funciona así: en el lugar apropiado, llama a

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

Esto coloca una máscara de clic, personaliza un cuadro de diálogo, lo centra y lo muestra, y luego devuelve FALSE y el formulario no se envía.

Más tarde, cuando el usuario decida, si presiona "Sí", llama a la función confirmCallback. En el otro, páginas del producto basadas en Ajax, esto recopila información, crea un postBody y usa el objeto Ajax de Prototype para publicarlo, y todo está bien. (Si " No " ;, entonces el diálogo y la máscara de clic se eliminan y las cosas continúan).

En esta página más simple, con el formulario HTML puro, tengo una función confirmCallback que se ve así:

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

y se activa OK, pero cuando se envía el formulario, el botón de eliminar YA ya se ha hecho clic, y el falso devuelto por la confirmación personalizada ha suprimido el envío. En cambio, esto se considera un nuevo envío y no se hizo clic en el botón Eliminar, por lo que no se considera "exitoso". en términos de la sección estándar HTML 4 de W3.org 17.13.3. El servidor obtiene los datos, sin botón de eliminación, dice "Lo tengo pero no sé qué quiere que haga con él". y simplemente no hace más que servir la siguiente página.

Si has leído hasta aquí, GRACIAS, y aquí está mi pregunta real. ¿Cómo puedo, en mi función de confirmación CallCallback javascript, de manera cruzada, hacer que el botón Eliminar se active y tenga éxito? y enviar junto con el resto de los datos?

Answer 1

Parece que necesitará un campo oculto para pretender ser el botón presionado, y cada botón no requerirá nombre, sino un evento onclick para manipular el valor del campo oculto.

Si el nombre de los botones es diferente, es posible que necesite usar métodos DOM para agregar el campo oculto porque no creo que pueda cambiar el nombre de un campo una vez que se ha agregado al DOM en todos los navegadores .

Si necesita que esta solución siga funcionando sin JS, es posible que deba jugar un poco más con la lógica JS (para hacer más modificaciones en su árbol DOM inicial) o modificar el código del servidor. Incluso podrías poner el "¿Estás seguro?" comportamiento en la respuesta entonces ...

Answer 2

Suponiendo que el botón Eliminar es el botón de envío para ese formulario, entonces probablemente la solución más fácil es darle al formulario una identificación

<form id="submitForm"...

Luego, en su llamada de confirmación, envíe el formulario

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

Creo que eso hará lo que estás pidiendo, pero parece que ya estabas en esa solución, así que si preguntas algo más, házmelo saber.

Answer 3

En su devolución de llamada, elimine el controlador onclick para el botón (causando la confirmación), luego active un clic en el botón. Esto hará que el botón haga clic para enviar el formulario y provocará que el envío se vuelva a publicar junto con los datos del formulario.

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