提交表单，但页面不会重新加载 preventDefault不起作用

问题描述

当我使用表单并尝试提交时，它会重新加载页面。但是我的要求是提交表单但不重新加载页面并发送数据，并提及此操作 url 。 我知道这个重复的问题
表格

    <form id="leadsquareForm" name="leadsquareForm" class="leadsquare-form-single-course" method="post" enctype="multipart/form-data" action="https://myUrl.jsp">
                  <h3 class="talk-to-expert" style="width: fit-content;width: -moz-fit-content; margin: 0 auto 15px;">Wish to talk to an expert?</h3>
                  <div style=" margin: 0 auto 15px; width: -moz-fit-content; width: fit-content;">
                    <a href="tel:[phone]"><i class="fa fa-phone" style=" padding: 5px 10px; background: #25D366; color: #fff; border-radius: 7px; font-size: 30px; margin-right: 8px;"></i></a>
                    <div style="float: right; font-size: 15px; line-height: 1.3; font-weight: 600;">
                      <div style="color: #00d56b;"><a href="tel:[phone]">[phone]</a></div>
                      <div style="color: #f2aa3c;">Call Now for Expert Counselling</div>
                    </div>
                    <!--&lt;!&ndash;<h3 style="width: fit-content; width: -moz-fit-content; margin: 0 auto">OR</h3>&ndash;&gt;-->
                  </div>
                  <div class="mdl-textfield mdl-js-textfield">
                    <input class="mdl-textfield__input" type='text' id='FirstName' name='FirstName' placeholder="Name *" required='required' />
                    <label class="mdl-textfield__label" for='FirstName'>Name *</label>
                  </div>
    
                  <div class="mdl-textfield mdl-js-textfield">
                    <input class="mdl-textfield__input" type='email' id='EmailAddress' name='EmailAddress' placeholder="Email *" required='required' />
                    <label class="mdl-textfield__label" for='EmailAddress'>Email *</label>
                  </div>
    
                  <div class="mdl-textfield mdl-js-textfield">
                    <input class="mdl-textfield__input" type='tel' id='Phone' name='Phone'  placeholder="Phone Number *" required='required' onkeypress="if(this.value.length==10){return false;}" />
                    <label class="mdl-textfield__label" for='Phone'>Phone Number *</label>
                  </div>

提交

不起作用，我已经包含了此方法。

$("#leadsquareForm").submit(function(event){
    alert('intercept');
    event.preventDefault();
    console.log(event);
});

解决方法

preventDefault()在这种情况下会阻止您提交表单。如果您尝试运行一些代码然后提交表单，则可以尝试以下操作：

   $("#leadsquareForm").submit(function(event){
       alert('intercept');
       event.preventDefault();
       console.log(event);
       // Run some code...

       // Then submit the form
       $("#leadsquareForm").submit()
   });

,

$('#leadsquareForm').one('submit',function myFormSubmitCallback(event){
  alert('intercept');
  event.stopPropagation();
  event.preventDefault();
  var $this = $(this);
  $this.one('submit',myFormSubmitCallback);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <form id="leadsquareForm" name="leadsquareForm" class="leadsquare-form-single-course" method="post" enctype="multipart/form-data" action="https://myUrl.jsp">
    <h3 class="talk-to-expert" style="width: fit-content;width: -moz-fit-content; margin: 0 auto 15px;">Wish to talk to an expert?</h3>
    <div style=" margin: 0 auto 15px; width: -moz-fit-content; width: fit-content;">
      <a href="tel:[phone]"><i class="fa fa-phone" style=" padding: 5px 10px; background: #25D366; color: #fff; border-radius: 7px; font-size: 30px; margin-right: 8px;"></i></a>
      <div style="float: right; font-size: 15px; line-height: 1.3; font-weight: 600;">
        <div style="color: #00d56b;"><a href="tel:[phone]">[phone]</a></div>
        <div style="color: #f2aa3c;">Call Now for Expert Counselling</div>
      </div>
      <!--&lt;!&ndash;<h3 style="width: fit-content; width: -moz-fit-content; margin: 0 auto">OR</h3>&ndash;&gt;-->
    </div>
    <div class="mdl-textfield mdl-js-textfield">
      <input class="mdl-textfield__input" type='text' id='FirstName' name='FirstName' placeholder="Name *" required='required' />
      <label class="mdl-textfield__label" for='FirstName'>Name *</label>
    </div>

    <div class="mdl-textfield mdl-js-textfield">
      <input class="mdl-textfield__input" type='email' id='EmailAddress' name='EmailAddress' placeholder="Email *" required='required' />
      <label class="mdl-textfield__label" for='EmailAddress'>Email *</label>
    </div>

    <div class="mdl-textfield mdl-js-textfield">
      <input class="mdl-textfield__input" type='tel' id='Phone' name='Phone'  placeholder="Phone Number *" required='required' onkeypress="if(this.value.length==10){return false;}" />
      <label class="mdl-textfield__label" for='Phone'>Phone Number *</label>
    </div>
    <button class="mdl-button"  style="background: rgba(158,158,.2);" id="form-submit-button" type="submit">Submit</button>
  </form>