Javascript - 使用 html5 表单验证一键调用 ajax 和一键提交表单

Question

I have a form that I want to use the required attribute, which I believe is from html5 to make sure the user puts in a name before running the ajax to send and email and stays on this page (index.php). The form below works. My problem is that I can't figure out how to aa button called pay that submits the form to pay.php like a regular form submit so the user ends up on pay.php when they click "pay" and I want the form validation to still occur when they click pay and on pay.php I can grab the contactName from the post.

<form id="contactForm" method="post" class="tm-contact-form">                                
  Name: <input type="text" id="contactName" name="contactName" class="form-control" placeholder="Name" required/>
  <button type="submit" id="inquire-button"  class="btn btn-primary">Inquire</button>
  <div id="mail-status">&nbsp;</div>
</form> 

<script type="text/javascript">
$("inquire-button").on('click',function(e){
  e.preventDefault();
});

$("#contactForm").on('submit',function(e){
  sendContact();
  e.preventDefault();
});

function sendContact() {
  jQuery.ajax({
  url: "mailer.php",
  data:'contactName='+$("#contactName").val(),
  type: "POST",
  success:function(data){
    $("#mail-status").html(data);
  },
    error:function (){}
  });
}
</script>

Answer 1

EITHER don't use the click, but only the submit event

 $("#contactForm").on('submit', function(e) { const $btn = $(document.activeElement); if ($btn.is("#inquire")) { console.log("Inquire clicked") e.preventDefault(); jQuery.ajax({ url: "mailer.php", data: 'contactName=' + $("#contactName").val(), type: "POST", success: function(data) { $("#mail-status").html(data); }, error: function() {} }); } else console.log("Pay clicked") })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form id="contactForm" method="post" class="tm-contact-form"> Name: <input type="text" id="contactName" name="contactName" class="form-control" placeholder="Name" required/> <button type="submit" id="inquire-button" class="btn btn-primary">Inquire</button> <button type="submit" id="pay" class="btn btn-primary">Pay</button> <div id="mail-status">&nbsp;</div> </form>

OR use a button

 $("#contactForm").on('submit', function(e) { console.log("Submitted (pay)") }) $("#inquire-button").on("click", function() { if (!this.form.checkValidity()) { this.form.reportValidity() return } console.log("Inquire clicked") jQuery.ajax({ url: "mailer.php", data: 'contactName=' + $("#contactName").val(), type: "POST", success: function(data) { $("#mail-status").html(data); }, error: function() {} }); })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form id="contactForm" method="post" class="tm-contact-form"> Name: <input type="text" id="contactName" name="contactName" class="form-control" placeholder="Name" required/> <button type="button" id="inquire-button" class="btn btn-primary">Inquire</button> <button type="submit" id="pay" class="btn btn-primary">Pay</button> <div id="mail-status">&nbsp;</div> </form>