如何防止雙擊使用 php 表單提交？

Question

            <form action="contact.php" method="post" id="contact_form" name="contact_form">

                <h3 class="text-center mb-4 sub-header" id="contactus" style="color:#2070c0;">CONTACT US</h3>

                <div class="form-group row">
                    <label class="col-sm-3 col-form-label">SUBSCRIPTION NO</label>
                    <div class="col-sm-9">
                        <input type="text" class="form-control phone-group text-ft" id="subscriptionNumber"
                            aria-describedby="subscriptionNumber" placeholder="Subscription Number"
                            name="subscriptionNumber">
                    </div>
                </div>
                <div class="form-group row required">
                    <label class="col-sm-3 col-form-label">LAST NAME</label>
                    <div class="col-sm-9">
                        <input type="text" class="form-control phone-group text-ft" id="lastname"
                            placeholder="Last name" name="lastname">
                    </div>
                </div>
                <div class="form-group row required">
                    <label class="col-sm-3 col-form-label">FIRST NAME</label>
                    <div class="col-sm-9">
                        <input type="text" class="form-control phone-group text-ft" id="firstname"
                            aria-describedby="firstname" placeholder="First name" name="firstname">
                    </div>
                </div>
                <div class="form-group row required">
                    <label class="col-sm-3 col-form-label">MOBILE NO.</label>
                    <div class="col-sm-9">
                        <input type="text" class="form-control phone-group text-ft" id="mobileno"
                            placeholder="Mobile No" name="mobileno">
                    </div>
                </div>
                <div class="form-group row required">
                    <label class="col-sm-3 col-form-label">EMAIL</label>
                    <div class="col-sm-9">
                        <input type="text" class="form-control phone-group text-ft" id="email" placeholder="Email"
                            name="email">
                    </div>
                </div>
                <div class="form-group row required">
                    <label class="col-sm-3 col-form-label">SUBJECT</label>
                    <div class="col-sm-9">
                        <input type="text" class="form-control phone-group text-ft" id="subject" placeholder="Subject"
                            name="subject">
                    </div>
                </div>

                <div class="form-group row required">
                    <label for="message" class="col-sm-3 col-form-label">MESSAGE</label>
                    <div class="col-sm-9">
                        <textarea class="form-control" placeholder="Message" id="message" rows="5"
                            name="message"></textarea>
                    </div>
                </div>
                <span>
                    <?php
            if(isset($_GET['contact'])){
                if($_GET['contact']=="success"){
                    echo '<h5 class="text-success text-center">Mail sent successfully</h5>';
                }
                if($_GET['contact']=="failed"){
                    echo '<h5 class="text-danger text-center">Mail not sent. Please try later.</h5>';
                }
            }
                ?>
                </span>
                <div class="row">
                    <div class="col-sm-12 text-center">
                        <button type="submit" onclick="this.disabled=true;this.value='Sending, please wait...';" id="submitButton" class="btn btn-primary btn-ft" value="submit">SUBMIT</button></div>
                </div>
            </form>

       <script>
        $("#contact_form").validate({
            rules: {
                subscriptionNumber: {
                    required: false
                },
                lastname: {
                    required: true
                },
                firstname: {
                    required: true
                },
                mobileno: {
                    required: true
                },
                email: {
                    required: true
                },
                subject: {
                    required: true
                },
                message: {
                    required: true
                }
            },
            messages: {
                "subscriptionNumber": {
                    required: "Subscription number is required"
                },
                "lastname": {
                    required: "Lastname is required"
                },
                "firstname": {
                    required: "Firstname is required"
                },
                "mobileno": {
                    required: "Mobile number is required"
                },
                "email": {
                    required: "Email is required"
                },
                "subject": {
                    required: "Subject is required"
                },
                "message": {
                    required: "Message is required"
                }
            },
            submitHandler: function (form) {
                console.log(form);
                form.submit();
            }

        });
    </script>

當我在提交表單后禁用提交按鈕以防止雙擊時。 jquery 驗證不起作用。 請給我一個建議。

禁用代碼：

<input id="btnSubmit" type="submit" onclick="this.disabled = true">

Answer 1

您應該在提交表單后禁用該按鈕。

    $("#contact_form").validate({
            rules: {
                subscriptionNumber: {
                    required: false
                },
                lastname: {
                    required: true
                },
                firstname: {
                    required: true
                },
                mobileno: {
                    required: true
                },
                email: {
                    required: true
                },
                subject: {
                    required: true
                },
                message: {
                    required: true
                }
            },
            messages: {
                "subscriptionNumber": {
                    required: "Subscription number is required"
                },
                "lastname": {
                    required: "Lastname is required"
                },
                "firstname": {
                    required: "Firstname is required"
                },
                "mobileno": {
                    required: "Mobile number is required"
                },
                "email": {
                    required: "Email is required"
                },
                "subject": {
                    required: "Subject is required"
                },
                "message": {
                    required: "Message is required"
                }
            },
            submitHandler: function (form) {
                console.log(form);
                form.submit();
                $('#submitButton').prop('disabled', true)

            }

Answer 2

為什么不能嘗試在 jquery 中添加事件監聽器，例如：

$('#btnSubmit').click(function(){
  $(this).prop('disabled', true);
});

這解決了這個問題。