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

我一直在Wordpress里玩这个表单

这是可行的，但问题是

页面加载时，联系人表单为空（显然）

如果信息没有放在文本字段中，表单将不会发送（显然）

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

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

现在，<强>没有< /强>刷新页面，我想用空白表单发送<强>新<强>消息。< /P> 我填写所有字段，点击发送，我收到一条错误消息，上面写着“无效的电子邮件。你必须至少输入一个电子邮件地址。”—（这条消息的来源，我不知道……我没有做到，我通过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) ?>" />

                          <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(); ?>

* 
:
试试这个
在提交表单后的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');
      }
     });

jQuery.ajax
({
类型：“POST”，
url:“/contact form.php”，
数据：postvalues，
成功：功能（响应）
{
jQuery（'#status'）.addClass（'成功-
message'）.html（response.show（）.delay（2500.fadeOut（）；
//清除所有输入
//jQuery（“#联系人表单输入”）.val（“”）；
jQuery（“#联系人表单输入.requiredField”）.val（“”）；
jQuery（'#message'）.val（“”）；
jQuery（'input:not（#submit'））.val（“”）；
jQuery（'#submit'）.attr（'value'，“submitmessage”）；
jQuery（'#submit'）.removeAttr（'disabled'）；
}
});

希望对你有所帮助

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

所以现在它读到

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

宾果
 只是为了让我明白。。。（因为某个粗鲁的人刚刚告诉我，我不应该编码，因为我不识字）。。。ID如下所示#contactName=联系人的名字和姓氏#电子邮件=个人的电子邮件（发送电子邮件的人..未接收）#subject=“Duh”#消息另一个“Duh”我道歉，如果在这段代码中有一些明显的东西，我遗漏了，但我是新的东西，并试图学习。。。所以请。。。没有关于我“无法阅读”的粗鲁评论不幸的是没有：（……现在当点击“提交”按钮时，它正在加载wordpress 404页面……这是一个网站，如果查看它会对任何人都有帮助的话。www.allentownalive.org/联系我们/实际上……你的代码中有一个错误……你已经用一个额外的“t”与formt联系了最后…我将再次尝试编辑我在表单中发现了一些隐藏字段，这些字段也是输入的，因此代码将清除这些字段，因此仅使用必填字段我刚刚再次尝试编辑，但我仍然得到404页..提交按钮似乎正在尝试刷新整个页面，而不仅仅是在jQuery中运行比如以前…我已经将代码还原回我问题中发布的内容…如果你访问www.allentownlavice.org/contact-us/你可以看到它应该如何工作…但是尝试在表单清除后发送第二封电子邮件，它会抛出一个错误事实上，我发现了…我必须为$al#u选项（#options）添加一个ID然后将其添加到jQuery（'input:not（#submit）'）.val（“”）；现在是jQuery（'input:not（#submit，#options））.val（“”）；我清除表单的代码并没有排除隐藏的输入…如果不是因为您关于只清除必填字段的评论，我不会想到这一点，谢谢！！！
          jQuery('input:not(#submit)').val("");

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