Disable "submit" button after form validation and submission. PHP, JQ?

Question

I have a contact-template.php file from wordpress...

The form has 4 required fields...

Right now, if any or all required fields are blank, the form will not submit and the user will get "This field is required" message below each text input field that is blank. - this is functioning exactly how I want it to

The problem I am having is when the required fields are filled, and the "submit" button is clicked, there is a 10-15 second pause before the "Thank you, we'll get back to you as soon as possible" message displays...

because of this pause, users are clicking the submit button multiple times and it is sending a duplicate email for every click.

I have tried using "onclick="this.disabled=true;this.value='Sending, please wait...", but this skips the input field validation and does not allow the message to be sent.

I want this button to disable and display "sending, please wait..." text, but it needs to validate text input fields and ultimately submit/send the email message

PLEASE HELP!!!

Here is the code...

<?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

you can try:

jQuery("#submit").attr("disabled","disabled") when the form is submitted / ajax function starts.

like so:

function sendData(){

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

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

Answer 2

Holy sweet mother of jesus, please use a template engine, this is just horrible to read. >.<

Anyways, you can disable it with jQuery like this if i didnt do any mistakes on the code ...

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