Creating a contact form with Jquery/PHP that does not refresh - php

Question

I'm a fairly new to web development. Mostly I'm a freelance artist trying to make her own web portfolio. Although I recognize the importance of learning the basics of code so I'm trying to do this all myself as I go.
Currently I'm at a stalemate with a simple PHP/HTML Contact Form. I have some forms on my HTML index (it's a one page site) that call in my PHP file to send the message to my email. As you probably would expect it looks a little something like this:
Index.html
<input name="name" type="text" placeholder="First and last name">
<input name="email" type="email" id="email" placeholder="Email address">
<textarea name="message" placeholder="Your Message"></textarea>
<input id="Submit" class="submit_btn" name="submit" type="submit" value="Submit">
</form>
Contactme.php
<?php $name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$from = 'From: mywebsite.com';
$to = 'twocoffeespoons#gmail.com';
$subject = 'Hello';
$body = "From: $name\n E-Mail: $email\n Message:\n $message";
if ($_POST['submit']) {
if (mail ($to, $subject, $body, $from)) {
echo '<script language="javascript">';
echo 'alert("message successfully sent")';
echo '</script>';
} else {
echo '<p>Something went wrong, go back and stry again!</p>';
}
}
?>
I think I understand the basics, but I'm really not satisfied with my form. When the user hits my submit button the php script is run and they are taken to a different page. I know I could simply change my website to index.php but I'd rather not. Even then the website still refreshes after I hit send. I've been looking through everything I can find, but the tutorials seem really outdated.
Does anybody have some advice? I'd like to use AJAX/JQuery to send the input to my php while the user just gets a "Your Message Has Been Sent Alert" without leaving my website. I'm sorry if my terminology is off or a little confusing. Like I said I'm really new to this, and have been trying to solve this problem for the last three days with no results.

Answer 1

try something like this
$("#ajaxform").submit(function(e)
{
var postData = $(this).serializeArray();
var formURL = $(this).attr("action");
$.ajax(
{
url : formURL,
type: "POST",
data : postData,
success:function(data, textStatus, jqXHR)
{
//data: return data from server
},
error: function(jqXHR, textStatus, errorThrown)
{
//if fails
}
});
e.preventDefault(); //STOP default action
});
HTML CODE
<form id="ajaxform" action="your_url_goes_here">
.......
</form>

Answer 2

HTML
<input name="name" id="first" type="text" placeholder="First and last name">
<input name="email" type="email" id="email" placeholder="Email address">
<textarea id="message" name="message" placeholder="Your Message"></textarea>
<input id="Submit" class="submit_btn" name="submit" type="submit" value="Submit">
<span class="error" style="display:none">All Fields Are Required!</span>
<span class="success" style="display:none">Contact Form Submitted Successfully</span>
Script
$(function() {
$(".submit_btn").click(function() {
var name = $("#first").val();
var email = $("#email").val();
var message = $("#message").val();
var dataString = 'name=' + name + '&email=' + email+ '&message' + message;
if (name == '' || email == '' || message == '') {
$('.success').fadeOut(200).hide();
$('.error').fadeOut(200).show();
}
else {
$.ajax({
type: "POST",
url: "Contactme.php",
data: dataString,
success: function() {
$('.success').fadeIn(200).show();
$('.error').fadeOut(200).hide();
}
});
}
return false;
});
});

Answer 3

$("#formid").submit(function() {
// your code
return false; //return false also works..
});

Answer 4

- just try this code it will help you , submit your form as method="POST" and action="abc.php";
<?php
if(isset($_POST['submit'])){
$to=$_POST['email'];
$from=$_POST['name'];
$message=$_POST['message'];
$headers = "From:" . $from;
mail($to,$message,$headers);
echo "Mail Sent.";
}
?>