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

时间:2014-01-15 04:35:14

标签: javascript php jquery wordpress forms

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

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

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

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

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

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

现在没有刷新页面,我想使用空白表单发送消息。

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

此错误消息指的是“邮件到”电子邮件地址,该代码来自Wordpress管理员设置。

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

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

以下是代码:

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

                          <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('#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 :(得分: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');
      }
     });

希望它的帮助..

答案 1 :(得分: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("");

宾果!