Jquery trap form submit()

Question

Actualmente estoy usando jquery para atrapar el envío de un formulario y mostrar a los usuarios un cuadro de diálogo para confirmación. Si el usuario hace clic en sí, el formulario debe enviarse. Si el usuario hace clic en no, entonces cierre el diálogo.

Todo esto funciona bien, pero para un problema: cuando el usuario hace clic en sí, esto desencadena el mismo código otra vez, y se vuelve a abrir el cuadro de diálogo.

$("#myform").submit(function (event) { 
    if (something) { 
     var $dialog = $('<div></div>').dialog({ 
      buttons: { 
       "OK": function() { 
        $dialog.dialog('close'); 
        $("#myform").submit(); 
        return; 
       }, 
       Cancel: function() { 
        $(this).dialog("close"); 
       } 
      } 
     }); 
     $dialog.dialog('open'); 
     event.preventDefault(); 
     return false; 
    } else { 
     $("#myform").submit(); 
    } 
}); 

Entiendo por qué ocurre esto, pero no estoy seguro de la mejor manera de evitarlo. Me doy cuenta de que podría mostrar el modal al hacer clic con el botón, en lugar de enviar el formulario, pero esto no soluciona el problema de que el usuario presione el botón enter en el teclado para enviar el formulario.

Answer 1

Porque cuando submit la forma, el evento submit desencadena de nuevo y por lo que el controlador de eventos. Necesita unbind el controlador de eventos submit cuando el usuario dice OK. Pruebe esta

$("#myform").submit(function (event) { 
    if (something) { 
     var $dialog = $('<div></div>').dialog({ 
      buttons: { 
       "OK": function() { 
        $dialog.dialog('close'); 
        //Check this line - unbinding the submit event handler 
        $("#myform").unbind('submit').submit(); 
        return; 
       }, 
       Cancel: function() { 
        $(this).dialog("close"); 
       } 
      } 
     }); 
     $dialog.dialog('open'); 
     event.preventDefault(); 
     return false; 
    } else { 
     $("#myform").submit(); 
    } 
}); 

Answer 2

Usted debe devolver false cuando OK:

$("#myform").submit(function (event) { 
    if (something) { 
     var $dialog = $('<div></div>').dialog({ 
      buttons: { 
       "OK": function() { 
        $dialog.dialog('close'); 
        $("#myform").submit(); 
        return false; // <=== not just return; 
       }, 
       Cancel: function() { 
        $(this).dialog("close"); 
       } 
      } 
     }); 
     $dialog.dialog('open'); 
     event.preventDefault(); 
     return false; 
    } else { 
     $("#myform").submit(); 
    } 
}); 

o eliminar el manual de presentar:

buttons: { 
"OK": function() { 
    $dialog.dialog('close'); 
    //$("#myform").submit(); <-- delete it 
    return; 
}, 

Answer 3

me gustaría hacer something ya sea una, o un valor global de espacio de nombres de alguna entrada oculta de este modo:

var something = nameSpaced.something || $('#hiddenInput').val(); //your choice 
if (something) { 
    ... 
} ... 

Su lógica debería funcionar normalmente a continuación.

Answer 4

En lugar de utilizar el objeto jQuery para enviar el formulario, puede usar el elemento DOM al que se refiere el objeto jQuery para enviar el formulario. Esto pasa por alto el controlador de eventos jQuery. Su función OK se vería así:

"OK": function() { 
    $dialog.dialog('close'); 
    $("#myform").get(0).submit(); // use the underlying DOM element to sumbit 
    return false; 
},