Run PHP function without reloading doesnt work with AJAX - ajax

Question

I know this question has been asked a lot, but I can't solve my problem.
I want to run the PHP function without reloading the page. Why does this not work? The php file is indexTest.php.
The page is just scrolling to the top and nothing works.
I am new to AJAX so I really dont know what to do.
HTML:
<script type="text/javascript">
function submitdata()
{
var nameForm=document.getElementById( "nameForm" );
var emailForm=document.getElementById( "emailForm" );
var messageForm=document.getElementById( "messageForm" );
$.ajax({
type: 'post',
url: 'indexTest.php',
data: {
name:nameForm,
email:emailForm,
message:messageForm
},
});
return false;
}
</script>
<form onsubmit="return submitdata()" method="POST" id="contactForm">
<input spellcheck="false" class="first" type="text" name="name" placeholder="name" id="nameForm">
<input spellcheck="false" class="first" type="text" name="email" placeholder="email" id="emailForm">
<textarea rows="8" spellcheck="false" class="last" type="text" name="message" placeholder="message" id="messageForm"></textarea>
<input type="submit" name="submit" value="" id="button">
</form>
PHP:
<?php
if(isset($_POST['submit'])){
$to = "*"; // this is your Email address
$from = $_POST['email']; // this is the sender's Email address
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
echo "Invalid email format";
};
$first_name = $_POST['name'];
$subject = "Form submission";
$subject2 = "Copy of your form submission";
$message = "Email from: " . $from . "\n\n" . $first_name . " wrote the following:" . "\n\n" . $_POST['message'];
$message2 = "Here is a copy of your message " . $first_name . "\n\n" . $_POST['message'];
$headers = "From:" . $from;
$headers2 = "From:" . $to;
mail($to,$subject,$message,$headers);
mail($from,$subject2,$message2,$headers2); // sends a copy of the message to the sender
echo '<script language="javascript">';
echo 'alert("message successfully sent")';
echo '</script>';
// You can also use header('Location: thank_you.php'); to redirect to another page.
}
?>

Answer 1

The problem is that you are posting through the form itself, when you actually want to post through AJAX. Essentially, because you are calling your JavaScript function in onsubmit, the JavaScript will get run in addition to the default form submission.
What you need to do is disable default form submission with e.preventDefault();, and then run your JavaScript instead:
$("#contactForm").submit(function(e) {
e.preventDefault();
submitdata();
});
Hope this helps! :)