我有一个来自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;">* </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;">* </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;">* </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;">* </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(); ?>
答案 0 :(得分:0)
你可以尝试:
提交表单时 jQuery("#submit").attr("disabled","disabled")
/ ajax函数启动。
function sendData(){
jQuery("#submit").attr("disabled","disabled");
jQuery.ajax({
// ajax options..
});
} // function block
答案 1 :(得分:0)
耶稣圣洁的甜蜜妈妈,请使用模板引擎,这只是可怕的阅读。 &GT;。&LT;
无论如何,你可以使用jQuery禁用它,如果我没有在代码上做任何错误...
$(document).ready(function(){
$("input[type=submit]").click(function() {
$("input[type=submit]").attr("disabled", "disabled");
)};
}