PHP mail() sends 2 copies

Question

I have this problem with my contact form. When I submit the form I receive 2 identical emails in my box.

Im using JS to check the form for errors and then simple PHP mail() function to send the email.

Here is the PHP code:

<?php

$from = Trim(stripslashes($_POST['email']));
$to = "[email protected]";

$subject = "Contact Form";
$name = Trim(stripslashes($_POST['name']));
$email = Trim(stripslashes($_POST['email']));
$number = Trim(stripslashes($_POST['number']));
$message = Trim(stripslashes($_POST['message']));

    $body = "";
    $body .= "Name: ";
    $body .= $name;
    $body .= "\n\n";
    $body .= "E-mail: ";
    $body .= $email;
    $body .= "\n\n";
    $body .= "Telephone Number: ";
    $body .= $number;
    $body .= "\n\n";
    $body .= "Message: ";
    $body .= $message;
    $body .= "\n\n";

    $success = mail($to, $subject, $body, "From: <$from>" . "\r\n" . "Reply-to: <$from>" . "\r\n" . "Content-type: text; charset=utf-8");

?>

And here is the JS:

$(".submit").click(function() {
        var name = $("input[name=name]").val();
        var email = $("input[name=email]").val();
        var number = $("input[name=number]").val();
        var message = $("textarea[name=message]").val();

        if (defaults['name'] == name || name == "") {
            $(".error").text("Please enter your name!");
            return false;

        } else if (defaults['email'] == email || email == "") {
            $(".error").text("Please enter your email!");
            return false;

        } else if (defaults['number'] == number || number == "") {
            $(".error").text("Please enter your number!");
            return false;

        } else if (defaults['message'] == message || message == "") {
            $(".error").text("Plese enter your message!");
            return false;
        }

        var dataString = 'name=' + name + '&email=' + email + '&number=' + number + '&message=' + message;
        $(".error").text("Please wait...").hide().fadeIn("fast");

        $.ajax({
            type: "POST",
            url: "contact.php",
            data: dataString,
            success: function() {
                $('#form form').html("");
                $('#form form').append("<div id='success'>Your message has been sent! Thank you</div>");
            }
        });

        return false;
    });

And here is the HTML form:

<form id="contact" method="post" action="#">

<label for="name">Name:</label>
<input type="text" name="name" required tabindex="1">

<label for="email">Email adress:</label>
<input type="text" name="email" required tabindex="2">

<label for="number">Tel. number:</label>
<input type="text" name="number" tabindex="3">

<label for="message">Your message:</label>
<textarea name="message" rows="10" cols="70" required tabindex="4"></textarea>

<input type="checkbox" id="terms" name="terms" value="terms">I agree to the <a href="#">terms</a>

<input type="submit" name="submit" class="submit more-info" tabindex="5" value="Send">

<span class="error"></span>

</form>

I have been using the same code for all of my contact forms and it worked all right. Could it be hosting/server related issue?

Answer 1

replace your click event

$(".submit").click(function() { 

with

$('.submit').unbind('click').click(function() {

code.

What I can assume your click event is binding two times may be due to a lot of the mess in the code

also use this line in the end of the click event function

$('.submit').unbind('click').click(function() {

    // your stuff

    event.stopImmediatePropagation(); // as long as not bubbling up the DOM is ok?
});

for reference have a look at the link: https://forum.jquery.com/topic/jquery-executes-twice-after-ajax

Answer 2

$(".submit").click(function(e) { ... }) POSTS to your server for the first time.

Because this is a <submit> button, the form will still submit. The form POSTS to your server for the second time.

The solution would be adding a e.preventDefault() at the bottom inside the $(".submit").click function...

$(".submit").click(function(e) {
    //                      ^ add this e
    var name = ...;

    $.ajax({
        ...
    });
    e.preventDefault();
    return false;
});