首页 文章

如何在提交后重置电子邮件表单,以便在不刷新页面的情况下发送另一封电子邮件

提问于
浏览
0

我有这种形式,我一直在使用Wordpress .

它有效,但这是问题......

页面加载时,联系表单是空白的(显然)

如果信息未放入文本字段,表单将不会发送(显然)

如果信息被放入文本字段,它将发送,“提交”按钮将被禁用,“提交”按钮上的文本将从“提交消息”更改为“正在提交,请稍候......”

当消息发送完毕后,表单上会弹出“成功消息”2.5秒,输入字段将被清除回空白表单,“提交”按钮文本将恢复为原始的“提交消息”文本 .

现在, WITHOUT 刷新页面,我想使用空白表单发送 NEW 消息 .

我填写所有字段,点击发送,然后收到错误消息“无效的电子邮件 . 您必须输入至少一个电子邮件地址 . ” - (这条消息的来源,我不知道......我没有成功,我通过Wordpress文件搜索到高低,无法找到它的来源)

此错误消息指的是“邮件到”电子邮件地址,该代码从Wordpress管理员设置中提取 .

由于某种原因,在第一次提交表单后,它“使用”该邮件地址,并且除非重置页面,否则不允许再次使用该表单 .

这里是否有解决方案,以便我可以发送消息...表单将自动清除...我可以发送新消息,表单将自动清除...我可以发送新消息...等等,没有每次提交邮件后都必须刷新页面 .

这是代码:

<?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="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('#submit').attr('disabled',"disabled"); jQuery('#submit').attr('value', "Submitting, please wait..."); 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().delay(2500).fadeOut(); jQuery('input:not(#submit)').val(""); jQuery('textarea').val(""); jQuery('#submit').attr('value', "Submit Message"); jQuery('#submit').removeAttr('disabled'); } }); 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(); ?>

2 回答

  • 0

    试试这个,

    在提交表单后,在您的ajax响应部分中,您获得了成功消息,

    所以只需清除下面的当前表格 .

    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().delay(2500).fadeOut();
           // to clear all inputs
           //jQuery("#contact-form input").val('');
           jQuery("#contact-form input.requiredField").val('');
           jQuery('#message').val("");
    
            jQuery('input:not(#submit)').val("");
    
            jQuery('#submit').attr('value', "Submit Message");
                jQuery('#submit').removeAttr('disabled');
          }
         });
    

    希望它的帮助..

  • 0
    <?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) ?>" />
    

    将新ID添加到输入并将其命名为#options

    <input id="options" type="hidden" name = "options" value="<?php.....
    

    添加#options到......

    jQuery('input:not(#submit)').val("");
    

    现在看来......

    jQuery('input:not(#submit, #options)').val("");
    

    答对了!

相关问题