Email Send Form PHP without refresh (JQuery and Ajax)

Question

I am trying to make a Email form in html with php and as many people know the page reloads after pressing the submit button, I am trying to avoid that. I know that you can do this with Jquery and AJAX i have seen alot of Stackoverflow question about it giving the fix but i still don't get it as a non-native speaker of english I would like if people explain it to me a little further heres my code:

HTML & AJAX (test.html)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <form method="POST" id="contact">
        <div class="form-group">
            <label for="name">Voornaam*</label>
            <input name="fn" type="text" class="form-control" id="fn" aria-describedby="nameHelp" placeholder="John Doe" required>
        </div>
        <div class="form-group">
            <label for="name">Achternaam*</label>
            <input name="ln" type="text" class="form-control" id="ln" aria-describedby="nameHelp" placeholder="John Doe" required>
        </div>
        <div class="form-group">
            <label for="email">Email-address*</label>
            <input name="email" type="email" class="form-control" id="email" aria-describedby="emailHelp" placeholder="john@doe.com" required>
        </div>
        <div class="form-group">
            <label for="message">Bericht*</label>
            <textarea name="message" required class="form-control" id="message" rows="6"></textarea>
        </div>
        <input type="button" id="submit" value="Verstuur" class="btn btn-primary">
        <div id="result">
            <p id="result">Testing</p>
        </div>
    </form>




    <script type="text/javascript">
        $(function(){
            $('input[type=button] ').click(function(){
                $.ajax({
                    type: "POST",
                    url: "sendmail.php",
                    data: $("#contact").serialize(),
                    beforeSend: function(){
                        $('#result').html('<img src="img/loading.gif" />');
                    },
                    succes: function(data){
                        $('#result').html(data);
                    }
                });
            });
        });
    </script>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</body>

</html>

PHP (sendmail.php)

<?php
if(isset($_POST['submit'])){
    $to = "23179@ma-web.nl"; // this is your Email address
    $from = $_POST['email']; // this is the sender's Email address
    $fn = $_POST['fn'];
    $ln = $_POST['ln'];
    $messagemail = $_POST['message'];
    $subject = "Form submission";
    $subject2 = "Copy of your form submission";
    $message = $fn . " " . $ln . " wrote the following:" . "\n\n" . $messagemail;
    $message2 = "Here is a copy of your message " . $fn ." ". $ln ."\n\n" . $messagemail;

    mail($to,$subject,$message);
    mail($from,$subject2,$message2); // sends a copy of the message to the sender
}

From the examples you've seen, have you tried anything at all? Where did you get stuck? There are tutorials and examples online about how to use AJAX, Stack Overflow doesn't really seek to replace those tutorials. — David, Mar 10 '17 at 11:33
I've tried multiple examples, Don't really understand how they work — Lycan, Mar 10 '17 at 11:35
If you got stuck on something specific, we can help with that. "Teach me AJAX" is too broad for a Stack Overflow question. No example we give would somehow be *better* than the countless examples which already exist, including ones which already exist in *many* Stack Overflow questions. — David, Mar 10 '17 at 11:36
I've edited the script ive got an example now, its not working so i need help It's still refreshing and not sending the Email — Lycan, Mar 11 '17 at 13:14
If the PHP code is executing but the email is being sent, there are some debugging steps you can take here: http://stackoverflow.com/questions/24644436/php-mail-form-doesnt-complete-sending-e-mail — David, Mar 11 '17 at 13:21
The php code isn't even executing, The Ajax script is giving this error: ReferenceError: $ is not defined — Lycan, Mar 11 '17 at 13:26
`"$ is not defined"` - You didn't load jQuery in your page. You have to include jQuery in order to use it. — David, Mar 11 '17 at 13:31
Now that works but after i press the submit button the loading.gif loads for 3 seconds and then refreshes the page — Lycan, Mar 11 '17 at 13:40

score 0 · Answer 1 · answered Mar 10 '17 at 11:38

Here you can check the test code :

Add below code into your html file:

var data = {
name: $("#fn").val(),
email: $("#email").val()
 };

$.ajax({
type: "POST",
url: "email.php",/*php file path*/
data: data,
success: function(){
    $('.success').fadeIn(1000);
}

});

Email Send Form PHP without refresh (JQuery and Ajax)

1 Answers1