Preventing page refresh on form submission stops code from executing

Question

I have read so many solutions about preventing page reload from form submission, most of them are to return false with a "JQuery script" or preventDefault().

The problem is, if you prevent the page reload with Javascript or JQuery, the code won't be executed, so in my case, the email will not be sent. So, how could I run both?

Here is my HTML form.

 <form id="myform" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" method="post">
  <p><input class="w3-input w3-padding-16" type="text" placeholder="name" required name="name"></p>
  <p><input class="w3-input w3-padding-16" type="email" placeholder="email" required name="email"></p>
  <p><input class="w3-input w3-padding-16" type="text" placeholder="subject" required name="subject"></p>
  <p><input class="w3-input w3-padding-16" type="text" placeholder="comment" required name="comment"></p>
  <p>
    <button class="w3-button w3-light-grey w3-padding-large" type="submit">
      <i class="fa fa-paper-plane"></i> SEND MESSAGE
    </button>

My PHP code to collect data and send email:

<?php
$name = $email = $comment = $subject = "";

if ($_SERVER["REQUEST_METHOD"] == "POST") {
  $name = form($_POST["name"]);
  $email = form($_POST["email"]);
  $subject = form($_POST["subject"]);
  $comment = form($_POST["comment"]);
  $to = "myemail@gmail.com";
  mail($to,$subject,$comment,$email);
}
function form($data) {
  $data = trim($data);
  $data = stripslashes($data);
  $data = htmlspecialchars($data);
  return $data;
}
?>

My JQuery:

$(document).ready(function() {
    $(document).on('submit', '#myform', function() {
      return false;
     });
});

You're looking for Ajax. Google it, there are plenty of tutorials. Since you're already using jQuery, you can use their wrapper. — M. Eriksson, Aug 19 '17 at 14:50
Correct, if you stop the form submitting it wont submit. The idea is, once you stopped normal form submission, you make an AJAX call instead of allowing the form to do a normal submit. All you have done is stop anything at all happening.. Do a little research on AJAX. [Start here](https://www.tutorialspoint.com/ajax/) THen once you understand the concept [check out jQuery Ajax](http://api.jquery.com/jquery.ajax/) — RiggsFolly, Aug 19 '17 at 14:51
Possible duplicate of [jquery ajax form submit](https://stackoverflow.com/questions/9789082/jquery-ajax-form-submit) — lumio, Aug 19 '17 at 15:04
actually I found the answer on this: https://stackoverflow.com/questions/43198919/submit-button-and-form-not-working-when-attempting-to-prevent-page-reload — fxp869, Aug 19 '17 at 15:20

score 1 · Answer 1 · answered Aug 19 '17 at 16:21

I got this from here http://remotephpdevelopers.com/blog/prevent-form-submission/

seems like something you are looking for. You just need to pass event through. Hope this helps

$(“#submitButton”).click(function(event){
event.preventDefault();
//do your thing
});

score 0 · Answer 2 · answered Aug 19 '17 at 16:07

0

Please use $.ajax method for this without page load:

 $("#btn").click(function()
 {
 $.ajax({
type : 'POST',
url : 'url',
data : $('#form').serialize() 
 });

});

answered Aug 19 '17 at 16:07

Therichpost

1,759
2
14
19

Preventing page refresh on form submission stops code from executing

2 Answers2