HTML表单提交两次

Question

I've read most of the posts with similar issues, but can't seem to find an example or answer that exactly matches my situation.

I have a form with some required fields. When the form submits I want the validation to occur. But I don't want a default "submit" button or action. Instead, I have a generic Button object.

When I refer to "validation", I'm talking about the default action that occurs if inputs marked "required" have not been selected/filled. First question, can this validation be "called" with a method? Because I believe my problem is that I couldn't get it to fire except by clicking a submit button.

So, in my code, I have a hidden submit button, and then a generic button that performs a "click()" on the hidden submit. This fires the validation but I also believe it submits the form. I have the form's onsubmit value set to "return postCheckout();", and the function does a "return false", but I think it happens too late, after the form submit() fires and then the function fires... I need a way out of this mess!

HTML markup:

<form id="frmCheckout" onsubmit="return postCheckout();">
<table id="tblHeader">
<tr>
<td>
<select name="tblDevelopers" id="tblDevelopers" required>
<option value="" disabled selected>Who are you?</option>
<option value="1">Black</option>
<option value="2">Buntjer</option>
<option value="3">Dwyer</option><
</select>
</td>
</tr>
<tr>
<td>
<span style="display: none;">
<input type="submit" id="btn_frmCheckout" />
</span>
<button onclick="$( '#btn_frmCheckout' ).click();">Check Out</button>
</td>
</tr>  
</table>
</form>

The script:

function postCheckout() {
  $( "#dialog-PleaseWait" ).dialog({
    show: { effect: "highlight", color: "#99ccff", duration: "10000"},
    resizable: false,
    height:200,
    width:260,
    modal: false,
              buttons:
          {
            "OK": function()
            { $( this ).dialog( "close" );
            }
          }
  });
  $( ".ui-dialog-title" ).text("Please wait");
  $( ".ui-dialog-content" ).html("Copying Template Files. <img style='border:0; padding-left: 10px; padding-top:10px; padding-bottom:0px;' src='/htmlFiles/loader.gif' />");
  $( "#dialog-PleaseWait" ).dialog("open");

  $.ajax({
    type:'POST',
    url: 'checkout',
    data:$('#frmCheckout').serialize(), success: function() {window.close();}
    });

  return false;
}

Answer 1

Trying using event.preventDefault() within a on submit function. Instead of the onsubmit attribute.

$(document).on('submit','#frmCheckout',function(event){
   event.preventDefault();
   $( "#dialog-PleaseWait" ).dialog({
    show: { effect: "highlight", color: "#99ccff", duration: "10000"},
    resizable: false,
    height:200,
    width:260,
    modal: false,
              buttons:
          {
            "OK": function()
            { $( this ).dialog( "close" );
            }
          }
  });
  $( ".ui-dialog-title" ).text("Please wait");
  $( ".ui-dialog-content" ).html("Copying Template Files. <img style='border:0; padding-left: 10px; padding-top:10px; padding-bottom:0px;' src='/htmlFiles/loader.gif' />");
  $( "#dialog-PleaseWait" ).dialog("open");

  var validator = $("#frmCheckout").validate(options);
  if (validator.form()) {
    $.ajax({
        type:'POST',
        url: 'checkout',
        data:$('#frmCheckout').serialize(), success: function() {window.close();}
    });
  }
  return false;
});