表單驗證和提交后，禁用“提交”按鈕。 PHP，JQ？

Question

我有一個來自wordpress的contact-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")表單時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");
    )};
}