javascript - 如何防止按钮在发送后提交表单？

Question

出于某种原因，以下表单多次发送提交，我还注意到，即使您填写它并单击发送，该按钮也将使用 CSS 禁用“即颜色会改变并且它将具有默认值courser”，但每次您再次单击该按钮时，它都会一次又一次地发送。这与防止发送后再次发送有关吗？如果是这样我该怎么做？我做错了什么？

实时预览: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

发送成功后，添加下面一行代码

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

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

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


 } 

我相信这会对你有所帮助..