重新加载页面（发送表单）

Question

I have a problem with reloading the page. After clicking submit form the page reloads. I click send the form and takes me to http: // localhost: 3000 / mail.php. And I would like the site not to be reloaded. (I use the validation form jquery plugin).This is my code: jquery

  (function(){
    $("#contactForm").on('submit', function(e) {
          e.preventDefault();
          var data = {
            name = $('#field-name').val(),
            phone = $('#field-phone').val(),
            email = $('#field-email').val(),
            message = $('#field-message').val()
        };
        $.ajax({
            type: "POST",
            url: "mail.php",
            data: data,
            success: function(){
                console.log("jej");
            }
        });
        return false;
      });
  });

and php code

<?php
    $to = 'name@gmail.com';
    $name = $_POST['name'];
    $phone = $_POST['phone'];
    $email= $_POST['email'];
    $text = $_POST['message'];
    $subject = 'Nowy e-mail od ' . $name . ' (' . $email . ')';
    $message =  $name  . $phone .  $email . $text;
    $headers = 'From: ' . $name . "\r\n" .
    if(mail($to, $subject, $message, $headers)) {
      print "<p class='success'>Mail Sent.</p>";
    } else {
        print "<p class='Error'>Problem in Sending Mail.</p>";
    }

?>

Answer 1

change part of your code

$("#contactForm").on('submit', function(e) 

to this...

$("#contactFormButton").on('click', function(e) 

and change your submit button to this...

<button id="contactFormButton" type="button" class="form-control">Submit</button>

and here your php code...

if(mail($to, $subject, $message, $headers)) {
      echo "Mail Sent!";
    } else {
        echo "Error!!";
    }

and here you can catch result of your php code...

        success: function(data){
            console.log(data);
        }