submit the form but page does not reload. preventDefault() not working

Question

When I use form and try to submit, it reload the page.But my requirement is submit the form but not reload the page and send the data mention this action url. I know this duplicate Question
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>

Submit

Does not work, i have included the this method.

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

How are you creating your form? Is it generated after page load (eg after an ajax call)? — freedomn-m, Aug 22 '20 at 11:27
Are there any console errors? Are you getting the first `alert`? (comment on existing answer indicates not) - if that's the case (no alert) then your event is not firing, so event.preventDefault() isn't even running so it's not "not working". — freedomn-m, Aug 22 '20 at 11:29
Does this answer your question? [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — freedomn-m, Aug 22 '20 at 11:31
Change your `$("#leadsquareForm").submit(function(...` to `$(document).on("submit", "#leadsquareForm", function(...` - you need event delegation — freedomn-m, Aug 22 '20 at 11:32
You're providing a lot of "did not work" without any helpful feedback. The next step is for you to provide a [mcve] which demonstrates the problem *and includes all of the problem* - for example includes that your form is created after the page load. In the process of creating the mcve - if you can't recreate it then there's some other issue (eg 2x #leadsquareForm). Recreating the issue can sometimes help you solve it but can also help us see where the problem might be other than "did not work" based on valid answers based on *the information provided so far* — freedomn-m, Aug 22 '20 at 17:00

score 0 · Answer 1 · answered Aug 22 '20 at 11:15

0

preventDefault() in this case prevents your form from being submitted. If you're trying to run some code and then submit the form then you can try following:

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

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

answered Aug 22 '20 at 11:15

Sabster

51
5

try `event.preventDefault()` first and then `alert('intercept')` after.. – Sabster Aug 22 '20 at 11:30
If there's no `alert` then the event handler isn't being called in the first place. The order of `event.preventDefault()` doesn't matter - it can be first or last - if last then it might fail if there's another unhandled script error before it - but in this case it's not being called at all – freedomn-m Aug 22 '20 at 11:33
Check your console, maybe there's some syntax error, It seems the event handler isn't being called. – Sabster Aug 22 '20 at 11:35

Rayees AC · Answer 2 · 2020-08-22T12:35:44.643

$('#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>

Sorry, try now you doesn't pass the form for not get the event. — Rayees AC, Aug 22 '20 at 12:07
please tell me is it 'one' yeah 'on'. this mehtod where is define 'myFormSubmitCallback' . — Ng Sharma, Aug 22 '20 at 13:08

submit the form but page does not reload. preventDefault() not working

2 Answers2