Prevent page reload and redirect to submit ajax / jquery form

Question

I looked through all similar posts, but nothing helps. This is what I have

HTML:

<section> <form id="contact-form" action="" method="post"> <fieldset> <input id="name" name="name" placeholder="Name" type="text" /> <input id="email" name="email" placeholder="Email" type="text" /> <textarea id="comments" name="comments" placeholder="Message"></textarea> <div class="12u"> <a href="#" id="form-button-submit " class="button" onClick="sendForm()">Send Message</a> <a href="#" id="form-button-clear" class="button" onClick="document.getElementById('contact-form').reset()">Clear Form</a> </div> <ul id="response"></ul> </fieldset> </form> </section> 

JavaScript / jQuery:

 function sendForm() { var name = $('input#name').val(); var email = $('input#email').val(); var comments = $('textarea#comments').val(); var formData = 'name=' + name + '&email=' + email + '&comments=' + comments; $.ajax({ type: 'post', url: 'js/sendEmail.php', data: formData, success: function(results) { $('ul#response').html(results); } }); // end ajax } 

What I cannot do is to prevent the page from refreshing when #form-button-submit clicked. I tried return false; I tried preventDefault() and every combination including return false; inside onClick . I also tried using input type="button" and type="submit" instead the same result. I can’t solve it, and it burns. If at all possible, I would prefer to use a hyperlink due to some design stuff. I would really appreciate your help in this.

Answer 1

Change the function as follows:

 function sendForm(e){ e.preventDefault(); } 

And as the comment mentions, pass the event:

 onclick = sendForm(event); 

Update 2:

 $('#form-button-submit').on('click', function(e){ e.preventDefault(); var name = $('input#name').val(), email = $('input#email').val(), comments = $('textarea#comments').val(), formData = 'name=' + name + '&email=' + email + '&comments=' + comments; $.ajax({ type: 'post', url: 'js/sendEmail.php', data: formData, success: function(results) { $('ul#response').html(results); } }); }); 

Answer 2

 function sendForm(){ // all your code return false; } 

Answer 3

Have you tried using

 function sendForm(event){ event.preventDefault(); } 

Answer 4

I was also a little busy finding a solution to this problem, and so far the best way to work I have found

Try using XHR to send a request to any URL, not $ .ajax () ... I know this sounds a little strange, but try it!
Example -

 <form method="POST" enctype="multipart/form-data" id="test-form"> 

---

 var testForm = document.getElementById('test-form'); testForm.onsubmit = function(event) { event.preventDefault(); var request = new XMLHttpRequest(); // POST to any url request.open('POST', some_url, false); var formData = new FormData(document.getElementById('test-form')); request.send(formData); 

This will lead to the successful sending of your data ... without reloading the page.

Answer 5

Simple and complete working code

 <script> $(document).ready(function() { $("#contact-form").submit(function() { $("#loading").show().fadeIn('slow'); $("#response").hide().fadeOut('slow'); var frm = $('#contact-form'); $.ajax({ type: frm.attr('method'), url: 'url.php', data: frm.serialize(), success: function (data) { $('#response').html(data); $("#loading").hide().fadeOut('slow'); $("#response").slideDown(); }, error: function(jqXHR, textStatus, errorThrown){ console.log(" The following error occured: "+ textStatus, errorThrown ); } }); return false; }); }); </script> 

#loading may be an image or something that will be shown when processing the form, to use the code, just create a form with the contact-form identifier

Answer 6

Another way to avoid submitting the form is to place the button outside the form. I had existing code that worked and created a new page based on working code and wrote html as follows:

 <form id="getPatientsForm"> Enter URL for patient server <br/><br/> <input name="forwardToUrl" type="hidden" value="/WEB-INF/jsp/patient/patientList.jsp" /> <input name="patientRootUrl" size="100"></input> <br/><br/> <button onclick="javascript:postGetPatientsForm();">Connect to Server</button> </form> 

This form causes the unwanted call forwarding described above. Changing html to what is shown below fixes the problem.

 <form id="getPatientsForm"> Enter URL for patient server <br/><br/> <input name="forwardToUrl" type="hidden" value="/WEB-INF/jsp/patient/patientList.jsp" /> <input name="patientRootUrl" size="100"></input> <br/><br/> </form> <button onclick="javascript:postGetPatientsForm();">Connect to Server</button> 

Answer 7

I expect someone to understand my idea very well, as it is a very simple idea.

• will provide you with the necessary form, or you can get it in any other way that you prefer.

• On the form, enter the “send” onclick method call from your javascript file.

• in this method make the variable a reference to your id from addEventListener on it and make the preventDefault method on "submit" not on "click".
  To clarify this, follow these steps:

   // element refers to the form DOM after you got it in a variable called element for example: element.addEventListener('submit', (e) => { e.preventDefault(); // rest of your code goes here }); 

  The brief idea is to deal with the form by sending an event after accessing the submit button by clicking the event.

Regardless of your needs inside this method, it will work without updating :)
Just make sure you are dealing with ajax correctly and everything will be done.

Of course, it will only work with forms.

Answer 8

The way I approached this: I removed the entire form tag and placed all form elements, such as input, textarea tags, in a div and used a single button to call the javascript function. Like this:

 <div id="myform"> <textarea name="textarea" class="form-control">Hello World</textarea> <button type="submit" class="btn btn-primary" onclick="javascript:sendRequest()">Save changes</button> <div> 

Javascript:

 function sendRequest() { $.ajax({ type: "POST", url: "/some/url/edit/", data: { data: $("#myform textarea").val() }, success: function (data, status, jqXHR) { console.log(data); if (data == 'success') { $('#mymodal').modal('hide'); } } }); return true; } 

I thought why use form when we submit the actual request using AJAX. This approach may require additional efforts to reset form elements, but it works for me.

Note The answers above are more elegant, but my use case was a bit different. There were many forms on my web page, and I did not think that registering event listeners for each submit button is a good way. So, I made each submit button call the sendRequest () function.