Как предотвратить кнопку отправки формы после отправки?

Question

По какой-то причине следующая форма отправляет подачу много раз, я также заметил, что даже когда вы ее заполняете и нажимаете «Отправить», кнопка будет отключена с помощью CSS », то есть цвет изменится, и у него будет курсор по умолчанию «но каждый раз, когда вы нажимаете кнопку снова, он будет отправлять снова и снова. Это как-то связано с предотвращением отправки снова после отправки? если да, то как мне это сделать? что я делаю неправильно?

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

После того, как для успешной отправки, затем добавьте следующую строку кода

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

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

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


} 

Я уверен, что это собираюсь помочь вам.

Answer 2

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

Это скроет кнопку отправки сразу после ее нажатия на один раз, так что это не позволит двойной, тройной и т.д. щелчками.

Answer 3

Отключить кнопку с помощью CSS недостаточно.

Попробуйте это:

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

Answer 4

Вы можете использовать

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

Answer 5

Это будет выглядеть Ницца: -

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