Jquery mostrando el diálogo de confirmación en el formulario enviado

Question

Necesito mostrar el cuadro de diálogo de confirmación al hacer clic en la imagen. Código en " onclick " La sección de la imagen solo debe ejecutarse si el diálogo de confirmación de jquery se vuelve verdadero.

En este punto, cuando el usuario hace clic en $ (" .submit_image "), se muestra el cuadro de diálogo, pero el formulario aún se envía.

La lógica debe ser la misma para el complemento jquery.alerts o el diálogo de confirmación de javascript normal.

<form name="myform">
<img class="submit_image" onclick="myform.field1.value='1';myform.field1.value='2'; myform.submit();">
</form>


$(document).ready(function(){
   // catch submit 
   $(".submit_image").click(function(e){
       jConfirm('Can you confirm this?', 'Confirmation Dialog', function(r) {
      return r;
       });
   });
});

Answer 1

Encontré una solución a mi problema, pero aún deben realizarse algunos cambios en el código existente.

En html coloqué la imagen dentro de la etiqueta de anclaje con href = a lo que tenía en el evento image onclick.

<form name="myform">
<a href="javascript: myform.field1.value='1';myform.field2.value='2'; myform.submit();" class="submit_image_link"><img src="..."></a>
</form>

Se agregó el método e.preventDefault () para evitar el evento predeterminado para el ancla, que está siguiendo el enlace o javascript en la sección href. Como entiendo, " return = false " o preventDefault () no funcionó para mí en mi código original, porque " img " La etiqueta no tiene ninguna acción predeterminada.

$(document).ready(function(){
   // catch submit 
   $(".submit_image_link").click(function(e){
    e.preventDefault();
    jConfirm('Can you confirm this?', 'Confirmation Dialog', function(r) {
        if (r) location.href = $(".submit_image_link").attr('href');
    });
   });
});

Answer 2

return jConfirm('Can you confirm this?', 'Confirmation Dialog', function(r) {
  return r;
});

Tal vez? jQuery necesita que devuelvas " false " desde la función .click para detener la acción predeterminada, y en este momento no está devolviendo nada de esa función.

* EDIT * *

Acabo de ver jConfirm, y debido a cómo funciona (específicamente porque no devuelve nada; solo puede devolver el valor a través de su devolución de llamada) es imposible usarlo de la forma que desee. Lo que tendrá que hacer en su lugar es SIEMPRE devuelva falso desde su controlador onclick, y luego en su devolución de llamada jConfirm invoque manualmente un envío de formulario.

Ejemplo:

$(document).ready(function(){
  // catch submit 
  $(".submit_image").click(function(e){
    jConfirm('Can you confirm this?', 'Confirmation Dialog', function(r) {
      // If they confirmed, manually trigger a form submission
      if (r) $(".submit_image").parents("FORM").submit();
    });
    // Always return false here since we don't know what jConfirm is going to do
    return false;
  });
});

Answer 3

Necesitas dividir tus eventos. Una para el clic de la imagen para llamar a la presentación de la forma, y ??luego a la presentación de la forma, que es el lugar apropiado para el retorno 'falso' para detener el envío de la forma.