How to prevent the button from submission the form after sending it?

Question

For some reason the following form is sending the submission many times, I have also noticed that even when you fill it up and click send, the button will be disabled using CSS "i.e. the colour will change and it will have a default courser" but every time you click the button again it will send again and again. Is it something to do with preventing to send again once sent? if so how do I do that? what I am doing wrong?

Live preview: loaistudio.com/contact

HTML:

<form id="contactForm" action="email.php" method="post" name="contactForm">
    <div class="name">
        <label>Your Name</label>
        <input id="name" type="text" placeholder="Enter Name" required>
    </div>
    <div class="email">
        <label>Email Address</label>
        <input id="email" type="email" placeholder="Enter Email" required>
    </div>
    <div class="message">
        <label>Message</label>
        <textarea id="message" required></textarea>
    </div>
    <button id="submit" type="submit">Send</button>
</form>

JavaScript:

$("#contactForm").submit(function (event) {

    /* stop form from submitting normally */
    event.preventDefault();

    /* get some values from elements on the page: */
    var $form = $(this),
        $submit = $form.find('button[type="submit"]'),
        name_value = $form.find('input[id="name"]').val(),
        email_value = $form.find('input[id="email"]').val(),
        message_value = $form.find('textarea[id="message"]').val(),
        url = $form.attr('action');

    /* send the data using post */
    var posting = $.post(url, {
        name: name_value,
        email: email_value,
        message: message_value,
        ajax: 1
    });

    posting.done(function (data) {
        $form.find('span.error').remove();

        if (data == "1") {

            /*Change the button text.*/
            $submit.text('Sent. Thank You!');
            $submit.addClass("sent");

        } else {
            $submit.after('<span style="display: inline-block; padding: 20px 5px; color: #bd3d3d" class="error">Failed to send the message, please check your entries and try again.</span>');
            /*Change the button text.*/
            $submit.text('Try Again');
        }
    });
});

PHP

<?php

    if(isset($_POST['name']) && $_POST['email'] && $_POST['message']) {

    $name = $_POST['name'];
    $email = $_POST['email'];
    $message = $_POST['message'];

    $to = "email@website.com";
    $subject = "New Message From: $name";
    $message .= "$messege";

    $headers  = 'MIME-Version: 1.0' . "\r\n";
    $headers .= 'Content-type: text/html; charset=utf-8' . "\r\n";
    $headers .= 'From: '.$email . "\r\n";
    $mailed = ( mail($to, $subject, $message, $headers) );

    if( isset($_POST['ajax']))
        $response = ($mailed) ? "1" : "0";
    else
        $response = ($mailed) ? "<h2>Success!</h2>" : "<h2>Error! There was a problem with sending.</h2>";
        echo $response;
        }
    else
        {
        echo "Form data error!";
    }
?>

CSS:

/*Contact Form*/
#contactForm {
    width: 45%;
    display: inline-block;
    vertical-align: middle;
}

    #contactForm label {
        display: block;
        margin-bottom: 10px;
    }

    #contactForm input, #contactForm textarea {
        color: #999999;
        border: 1px solid #CED1D6;

        width: 100%;
        padding: 10px 10px;
        margin-bottom: 15px;

        border-radius: 2px;
        -moz-border-radius: 2px;
        -webkit-border-radius: 2px;

        -webkit-transition: all 0.1s linear;
        -moz-transition: all 0.1s linear;
        -ms-transition: all 0.1s linear;
        -o-transition: all 0.1s linear;
        transition: all 0.1s linear;
    }

        #contactForm input:hover, #contactForm input:focus, 
        #contactForm textarea:hover, #contactForm textarea:focus {
            color: #49AB8E;
            border: 1px solid #49AB8E;
        }


        #submit {
            color: #FFFFFF;
            background: #C0C4CA;

            width: 100%;
            padding: 10px 10px;

            border-radius: 2px;
            -moz-border-radius: 2px;
            -webkit-border-radius: 2px;
        }

            #submit:hover, 
            #submit:active {
                background: #49AB8E;
            }


            /*Disable The Contact Form When Sent*/
            .sent {
                color: #F2F2F2;
                cursor: default;
            }

                #submit.sent:hover, 
                #submit.sent:active {
                    background: #C0C4CA;
                }

Answer 1

Once the for successfully sent, Then add the following line of code there

$("#submit").attr('disabled', 'disabled');

///
if (data == "1") {

        /*Change the button text.*/
        $submit.text('Sent. Thank You!');
        $submit.addClass("sent");
       $("#submit").attr('disabled', 'disabled');


 } 

I am sure this is going to help you..

Answer 2

This will look Nice :-

$("#submit").attr('disabled', 'disabled');
$("#submit").attr("value", "Please Wait...");

Answer 3

$("#contactForm").submit(function (event) {
   $("#submit").hide();  // add this line right after the above line

This will hide the submit button immediately after its clicked on once, so it won't allow for double, triple, etc clicks.

Answer 4

Disabling the button using CSS is not enough.

Try this:

$("#contactForm").submit(function (event) {
  $("#submit").attr('disabled', true);
  ...
});

Answer 5

You can use

$("#contactForm").submit(function (event) {
$("#submit").attr("disabled", true);
}