模糊事件触发javascript确认后提交事件未触发

Question

I have a simple form, where on blur event of textfield I am showing a confirm message to the user, which simply auto populates another hidden textfield. Which works good so far. The problem happens when the user directly clicks the submit button instead of clicking another field or anywhere else on the form. This should trigger both the blur and submit events, but for some reason the blur triggers, the confirmation comes up, and once the user clicks on the confirmation, submit event isn't triggered. User is forced to click submit again to trigger submit event. Any ideas?

$(function(){
   $("#txt_fld1").blur(function(){
      if(confirm("Auto calculate charge?"))
      {
         $("#txt_chrg").val("8.25");
      }
   });
   $("form").submit(function(){
      alert("SUBMITTING");
   });
})

Answer 1

This might help:

$("button[type=submit]").click(function(e) {
e.preventDeafault();
#("#txt_fld1").blur();
$("form").submit();
});

Answer 2

Consider using jQuery UI's custom confirmation dialog.

You can pass callbacks to Ok and Cancel events so that you can ensure that submit() gets triggered always.

In fact, you can trigger other validations before submit programmatically.

http://jqueryui.com/demos/dialog/#modal-confirmation

Answer 3

It seems that this is because "submit" requires a click-event on the submit button. But click does not actually occurs, cause when you perform a mousedown, then confirm pops up and consequently a blur-event on the submit button, ie mouseup-event does not occur, so there is no click. So when confirm is closed submit-button has already lost its focus and no submit occurred.

You have to manually submit a form, using a handler on mousedown-event

$("input:submit").mousedown(function(e){
    e.preventDefault();
    //$("#txt_fld1").blur();
    $('form').submit();
});