Jquery exibindo caixa de diálogo de confirmação no envio do formulário

Question

Preciso exibir a caixa de diálogo de confirmação ao clicar na imagem.O código na seção "onclick" da imagem só deve ser executado se a caixa de diálogo de confirmação do jquery retornar verdadeiro.

Neste ponto, quando o usuário clica em $(".submit_image") - a caixa de diálogo é exibida, mas o formulário ainda é enviado.

A lógica deve ser a mesma para o plugin jquery.alerts ou para a caixa de diálogo regular de confirmação de javascript.

<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

Encontrei uma solução para o meu problema, mas algumas alterações no código existente ainda precisam ser realizadas.

Em html coloquei a imagem dentro da tag âncora com href = ao que eu tinha no 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>

Adicionado o método e.preventDefault() para evitar eventos padrão para âncora, que segue o link ou javascript na seção href.Pelo que entendi, "return=false" ou preventDefault() não funcionou para mim no meu código original, porque a tag "img" não tem nenhuma ação padrão.

$(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;
});

Pode ser? O JQuery precisa que você retorne "false" da função .Click para interromper a ação padrão e, no momento, não está retornando nada dessa função.

* Editar *

Eu apenas olhei para o JConfirm e, por causa de como funciona (especificamente porque não retorna nada; só pode retornar o valor por seu retorno de chamada), é impossível usá -lo da maneira que você deseja. O que você precisará fazer é sempre retornar false do seu manipulador OnClick e, em seguida, no seu retorno de chamada JConfirm invocar manualmente um envio de formulário.

Exemplo:

$(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

Você precisa interromper seus eventos. Um para o OnClick da imagem para chamar o Submit do formulário e, em seguida, o Submit de Form, que é o local apropriado para o retorno 'falso' para interromper o envio do formulário.