Форма отправляет сообщение дважды

Question

Я адаптирую бесплатную форму, и она отлично работает, но она дважды отправляет электронную почту и записывает сообщение после выполнения дважды. Я пытался заменить кнопки и теги ввода в форме одним входным тегом с типом «кнопка», но он обналичил. Также проблема заключается в том, что каждый клик запускает скрипт и отправляет следующее сообщение, поэтому, если я нажму несколько раз за один момент, он отправит много писем. Должен ли я запрещать это в php или js?

<?php if(isset($emailSent) && $emailSent == true) { ?> 
       <p class="info">Your email was sent</p> 
      <?php } else { ?> 

       <div class="desc"> 
        <h2>Contact Us</h2> 
       </div> 

       <div id="contact-form"> 
        <?php if(isset($hasError) || isset($captchaError)) { ?> 
         <p class="alert">Error submitting the form</p> 
        <?php } ?> 

        <form id="contact-us" action="contact.php" method="post"> 
         <div class="formblock"> 
          <label class="screen-reader-text">Name</label> 
          <input type="text" name="contactName" id="contactName" value="<?php if(isset($_POST['contactName'])) echo $_POST['contactName'];?>" class="txt requiredField" placeholder="Name:" /> 
          <?php if($nameError != '') { ?> 
           <br /><span class="error"><?php echo $nameError;?></span> 
          <?php } ?> 
         </div> 

         <div class="formblock"> 
          <label class="screen-reader-text">Email</label> 
          <input type="email" name="email" id="email" value="<?php if(isset($_POST['email'])) echo $_POST['email'];?>" class="txt requiredField email" placeholder="Email:" /> 
          <?php if($emailError != '') { ?> 
           <br /><span class="error"><?php echo $emailError;?></span> 
          <?php } ?> 
         </div> 

         <div class="formblock"> 
          <label class="screen-reader-text">Message</label> 
          <textarea name="comments" id="commentsText" class="txtarea requiredField" placeholder="Message:"><?php if(isset($_POST['comments'])) { if(function_exists('stripslashes')) { echo stripslashes($_POST['comments']); } else { echo $_POST['comments']; } } ?></textarea> 
          <?php if($commentError != '') { ?> 
           <br /><span class="error"><?php echo $commentError;?></span> 
          <?php } ?> 
         </div> 
         <button name="submit" type="submit" class="subbutton">Send us Mail!</button> 
          <input type="hidden" name="submitted" id="submitted" value="true" /> 
        </form>   
       </div> 

      <?php } ?> 
     </div> 
    </div><!-- End #contact --> 

<script type="text/javascript"> 
    <!--//--><![CDATA[//><!-- 
    $(document).ready(function() { 
     $('form#contact-us').submit(function() { 
      $('form#contact-us .error').remove(); 
      var hasError = false; 
      $('.requiredField').each(function() { 
       if($.trim($(this).val()) == '') { 
        var labelText = $(this).prev('label').text(); 
        $(this).parent().append('<span class="error">Your forgot to enter your '+labelText+'.</span>'); 
        $(this).addClass('inputError'); 
        hasError = true; 
       } else if($(this).hasClass('email')) { 
        var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/; 
        if(!emailReg.test($.trim($(this).val()))) { 
         var labelText = $(this).prev('label').text(); 
         $(this).parent().append('<span class="error">Sorry! You\'ve entered an invalid '+labelText+'.</span>'); 
         $(this).addClass('inputError'); 
         hasError = true; 
        } 
       } 
      }); 
      if(!hasError) { 
       var formInput = $(this).serialize(); 
       $.post($(this).attr('action'),formInput, function(data){ 
        $('form#contact-us').slideUp("fast", function() {     
         $(this).before('<p class="tick"><strong>Thanks!</strong> Your email has been delivered. Huzzah!</p>'); 
        }); 
       }); 
      } 

      return false; 
     }); 
    }); 
    //-->!]]> 
</script> 

<?php 
error_reporting(E_ALL^E_NOTICE); // hide all basic notices from PHP 

//If the form is submitted 
if(isset($_POST['submitted'])) { 

    // require a name from user 
    if(trim($_POST['contactName']) === '') { 
     $nameError = 'Forgot your name!'; 
     $hasError = true; 
    } else { 
     $name = trim($_POST['contactName']); 
    } 

    // need valid email 
    if(trim($_POST['email']) === '') { 
     $emailError = 'Forgot to enter in your e-mail address.'; 
     $hasError = true; 
    } else if (!preg_match("/^[[:alnum:]][a-z0-9_.-]*@[a-z0-9.-]+\.[a-z]{2,4}$/i", trim($_POST['email']))) { 
     $emailError = 'You entered an invalid email address.'; 
     $hasError = true; 
    } else { 
     $email = trim($_POST['email']); 
    } 

    // we need at least some content 
    if(trim($_POST['comments']) === '') { 
     $commentError = 'You forgot to enter a message!'; 
     $hasError = true; 
    } else { 
     if(function_exists('stripslashes')) { 
      $comments = stripslashes(trim($_POST['comments'])); 
     } else { 
      $comments = trim($_POST['comments']); 
     } 
    } 

    // upon no failure errors let's email now! 
    if(!isset($hasError)) { 

     $emailTo = 'example@example.com'; 
     $subject = 'Submitted message from '.$name; 
     $sendCopy = trim($_POST['sendCopy']); 
     $body = "Name: $name \n\nEmail: $email \n\nComments: $comments"; 
     $headers = 'From: ' .' <'.$emailTo.'>' . "\r\n" . 'Reply-To: ' . $email; 

     mail($emailTo, $subject, $body, $headers); 
     mail($email, $subject, $body, $headers); 

     // set our boolean completion value to TRUE 
     $emailSent = true; 
    } 
} 
?> 

Answer 1

Функция отправителя отправляет один аргумент под номером event. Когда вы обнаруживаете ошибку проверки, вам нужно позвонить event.preventDefault(), чтобы форма не отправлялась.

$(document).ready(function() { 
    $('form#contact-us').submit(function(event) { 
     // you detect a validation error... 
     hasError = true; 

     // more stuff on submit... 

     // at the end of the function 
     if (hasError) { 
      event.preventDefault(); 
     } 
    });