提交表单但页面不会重新加载。防止默认（）不工作

Question

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

    <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:+919599000000"><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:+919599000000">+91 95990-00000</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);
});

Answer 1

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

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

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

Answer 2

$('#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:+919599000000"><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:+919599000000">+91 95990-00000</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, 158, .2);" id="form-submit-button" type="submit">Submit</button>
  </form>