表單驗證和提交後禁用「提交」按鈕。 PHP，JQ？

Question

我從WordPress的一個接觸template.php文件中...

形式有4個必填字段...

現在，如果任何或所有必填字段爲空，表單不會提交併且用戶將在每個空白文本輸入字段下方顯示「此字段是必需的」消息。 - 這是我想要的功能

我遇到的問題是當填寫必填字段，並單擊「提交」按鈕時，在「謝謝你」之前有10-15秒的暫停，我們會盡快給您回覆「信息顯示...

由於這個暫停，用戶點擊提交按鈕多次，它發送重複的電子郵件，每次點擊。

我試過使用「onclick =」this.disabled = true; this.value ='正在發送，請稍候...「，但是這會跳過輸入字段驗證，並且不允許發送消息

我想這個按鈕禁用和顯示「發送，請等待......」的文字，但它需要驗證文本輸入字段，並最終提交/發送電子郵件

請幫助！

這裏是代碼...

<?php /* Template Name: Contact Form */ ?> 


<?php get_header(); ?> 
<div id="top-div"></div> 

<div id="container"> 
<div id="inner-headline"> 
    <h2> 
     <?php 
      $headline = get_post_meta($post->ID, "_headline", $single = false); 
      if(!empty($headline[0])) 
      { 
       echo $headline[0]; 
      } 
      else 
      { 
       the_title(); 
      } 
     ?> 
    </h2> 
</div> 
<div id="content">  
    <div id="content-inner"> 
     <div class="sideright-left-col"> 

      <?php if (have_posts()) : ?> 

       <?php while (have_posts()) : the_post(); ?> 

       <?php the_content(); ?> 

        <?php if(isset($hasError) || isset($captchaError)): 
?> 
         <p class="error"><?php _e('There was an error 
submitting the form.', 'Sona')?><p> 
        <?php endif ?> 
        <div id="status"></div> 
        <form action="" id="contact-form" method="post"> 

         <div class="name"> 
          <label for="contactName"><span style="color: 
red;">*&nbsp</span><?php _e('Name', 'Sona'); ?>:</label> 
          <input type="text" name="contactName" 
id="contactName" value="<?php if(isset($_POST['contactName'])) echo $_POST['contactName'];?>" 
class="requiredField txt"/> 

          <?php if(isset($nameError) && $nameError != ''): ?> 
<span class="error"><?php echo $nameError;?></span><?php endif;?> 

          <div class="clear"></div> 
         </div> 
         <div class="email"> 
          <label for="email"><span style="color: 
red;">*&nbsp</span><?php _e('E-mail', 'Sona'); ?>:</label> 
          <input type="text" name="email" id="email" value="<?php 
if(isset($_POST['email'])) echo $_POST['email'];?>" class="requiredField email txt" /> 

          <?php if(isset($emailError) && 
$emailError != ''): ?><span class="error"><?php echo $emailError;?></span><?php endif;?> 

          <div class="clear"></div> 
         </div> 
         <div class="subject"> 
          <label for="subject"><span style="color: 
red;">*&nbsp</span><?php _e('Subject', 'Sona'); ?>:</label> 
          <input type="text" name="subject" id="subject" value="<? 
php if(isset($_POST['subject'])) echo $_POST['subject'];?>" class="requiredField txt"/> 

          <?php if(isset($subjectError) && $subjectError != ''): ? 
><span class="error"><?php echo $subjectError;?></span><?php endif;?> 

          <div class="clear"></div> 
         </div> 
         <div class="clear"></div> 
         <div class="message"> 
          <label for="message"><span style="color: 
red;">*&nbsp</span><?php _e('Message', 'Sona'); ?>:</label> 
          <textarea name="message" cols="100" rows="200" 
id="message" class="txt requiredField"><?php echo isset($_POST['message']) && 
$_POST['message']!='' 
? stripslashes($_POST['message']) : ''?></textarea> 

          <?php if(isset($messageError) && 
$messageError != '') { ?><span class="error"><?php echo $messageError;?></span> <?php } ?> 

          <div class="clear"></div> 
         </div> 
         <div> 
          <?php 
           $al_options = 
get_option('al_general_settings'); 
           $options = array( 

$al_options['al_contact_error_message'], 

$al_options['al_contact_success_message'], 

$al_options['al_subject'], 

$al_options['al_email_address'], 
               ); 
          ?> 
          <input type="hidden" name = "options" value="<?php 
echo implode(',', $options) ?>" /> 
          <input type="hidden" name="siteurl" value="<?php 
echo get_option('blogname')?>" /> 
         <br /> 
          <input type="submit" class="button white-back" 
value="Submit Message" tabindex="5" id="submit" name="send"/> 

          <div class="clear"></div> 
         </div> 
        </form> 
       </div> 
       <div class="sideright-right-col"> 
        <?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar("Contact 
Sidebar")) : ?> <?php endif;?> 
       </div> 
       <div class="clear"></div> 
      </div> 
      </div> 

     </div> 
<!-- END CONTENT --> 
</div> 
<?php endwhile; ?> 
<?php endif; ?> 
<script type="text/javascript"> 

jQuery(document).ready(function(){ 
jQuery("#contact-form").validate({ 
submitHandler: function() { 

    var postvalues = jQuery("#contact-form").serialize(); 


    jQuery.ajax 
    ({ 
     type: "POST", 
     url: "<?php echo get_template_directory_uri() ?>/contact-form.php", 
     data: postvalues, 
     success: function(response) 
     { 
     jQuery("#status").addClass('success- 
message').html(response).show('normal'); 
     jQuery('#contact-form :input.not("#send")').val(""); 
     jQuery('#contact-form :textarea').val(""); 
     } 
    }); 
    return false; 

}, 
focusInvalid: true, 
focusCleanup: false, 
rules: 
{ 
    contactName: {required: true}, 
    email: {required: true, minlength: 6,maxlength: 50, email:true}, 
    message: {required: true}, 
    subject: {required: true} 
}, 

messages: 
{ 
    contactName: {required: "<?php _e('This field is required', 'Sona'); ?>"}, 
    email: {required: "<?php _e('This field is required', 'Sona'); ?>", email: "<?php   
_e('Please provide a valid e-mail address.', 'Sona'); ?>"}, 
    message: {required: "<?php _e('This field is required', 'Sona'); ?>"}, 
    subject: {required: "<?php _e('This field is required', 'Sona'); ?>"} 
}, 

errorPlacement: function(error, element) 
{ 
    error.insertAfter(element); 
}, 
invalidHandler: function() 
{ 
    jQuery("body").animate({ scrollTop: 0 }, "slow"); 
} 
}); 
}); 


</script> 

<?php get_footer(); ?> 

Answer 1

可以試試：

jQuery("#submit").attr("disabled","disabled")當表單提交/ ajax函數啓動時。

像這樣：

function sendData(){ 

    jQuery("#submit").attr("disabled","disabled"); 

    jQuery.ajax({ 
    // ajax options.. 
    }); 
} // function block 

Answer 2

聖甜媽耶穌的，請使用模板引擎，這僅僅是可怕的閱讀。 >。 <

不管怎麼說，你可以用jQuery禁用它這樣的，如果我沒有做任何代碼錯誤......

$(document).ready(function(){ 
    $("input[type=submit]").click(function() { 
     $("input[type=submit]").attr("disabled", "disabled"); 
    )}; 
}