ワードプレスフォームの投稿でページリフレッシュを防止する

Question

私は自分のワードプレスのウェブサイトに小さなフォームを設定しました。しかし、フォームが提出され、成功メッセージが表示されますが、送信ボタンを押すとページがリロードされます。これを防ぐには？私はフォームのセクションに滞在するページをしたい。私は、フォームに起こったものを見つけるためにユーザーをスクロールする必要はありません。

PHP：

<?php 
    //If the form is submitted 
    if(isset($_POST['submitted'])) { 

    //Check to see if the honeypot captcha field was filled in 
    if(trim($_POST['checking']) !== '') { 
     $captchaError = true; 
    } else { 

     //Check to make sure that the name field is not empty 
     if(trim($_POST['contactName']) === '') { 
      $nameError = 'You forgot to enter your name.'; 
      $hasError = true; 
     } else { 
      $name = trim($_POST['contactName']); 
     } 

     //Check to make sure sure that a valid email address is submitted 
     if(trim($_POST['email']) === '') { 
      $emailError = 'You forgot to enter your email address.'; 
      $hasError = true; 
     } else if (!eregi("^[A-Z0-9._%-]+@[A-Z0-9._%-]+\.[A-Z]{2,4}$", trim($_POST['email']))) { 
      $emailError = 'You entered an invalid email address.'; 
      $hasError = true; 
     } else { 
      $email = trim($_POST['email']); 
     } 

     //Check to make sure comments were entered 
     if(trim($_POST['comments']) === '') { 
      $commentError = 'You forgot to enter your comments.'; 
      $hasError = true; 
     } else { 
      if(function_exists('stripslashes')) { 
       $comments = stripslashes(trim($_POST['comments'])); 
      } else { 
       $comments = trim($_POST['comments']); 
      } 
     } 

     //If there is no error, send the email 
     if(!isset($hasError)) { 

      $emailTo = 'me@somedomain.com'; 
      $subject = 'Contact Form Submission from '.$name; 
      $sendCopy = trim($_POST['sendCopy']); 
      $body = "Name: $name \n\nEmail: $email \n\nComments: $comments"; 
      $headers = 'From: My Site <'.$emailTo.'>' . "\r\n" . 'Reply-To: ' . $email; 

      mail($emailTo, $subject, $body, $headers); 

      if($sendCopy == true) { 
       $subject = 'You emailed Your Name'; 
       $headers = 'From: Your Name <noreply@somedomain.com>'; 
       mail($email, $subject, $body, $headers); 
      } 

      $emailSent = true; 

     } 
    } 
    } ?> 


    <?php get_header(); ?> 
    <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/scripts/contact-form.js"></script> 



    <?php if(isset($emailSent) && $emailSent == true) { ?> 

    <div class="thanks"> 
     <h1>Thanks, <?=$name;?></h1> 
     <p>Your email was successfully sent. I will be in touch soon.</p> 
    </div> 

    <?php } else { ?> 

    <?php if (have_posts()) : ?> 

    <?php while (have_posts()) : the_post(); ?> 
     <h1><?php the_title(); ?></h1> 
     <?php the_content(); ?> 

     <?php if(isset($hasError) || isset($captchaError)) { ?> 
      <p class="error">There was an error submitting the form.<p> 
     <?php } ?> 

     <form action="<?php the_permalink(); ?>" id="contactForm" method="post"> 

      <ol class="forms"> 
       <li><label for="contactName">Name</label> 
        <input type="text" name="contactName" id="contactName" value="<?php if(isset($_POST['contactName'])) echo $_POST['contactName'];?>" class="requiredField" /> 
        <?php if($nameError != '') { ?> 
         <span class="error"><?=$nameError;?></span> 
        <?php } ?> 
       </li> 

       <li><label for="email">Email</label> 
        <input type="text" name="email" id="email" value="<?php if(isset($_POST['email'])) echo $_POST['email'];?>" class="requiredField email" /> 
        <?php if($emailError != '') { ?> 
         <span class="error"><?=$emailError;?></span> 
        <?php } ?> 
       </li> 

       <li class="textarea"><label for="commentsText">Comments</label> 
        <textarea name="comments" id="commentsText" rows="20" cols="30" class="requiredField"><?php if(isset($_POST['comments'])) { if(function_exists('stripslashes')) { echo stripslashes($_POST['comments']); } else { echo $_POST['comments']; } } ?></textarea> 
        <?php if($commentError != '') { ?> 
         <span class="error"><?=$commentError;?></span> 
        <?php } ?> 
       </li> 
       <li class="inline"><input type="checkbox" name="sendCopy" id="sendCopy" value="true"<?php if(isset($_POST['sendCopy']) && $_POST['sendCopy'] == true) echo ' checked="checked"'; ?> /><label for="sendCopy">Send a copy of this email to yourself</label></li> 
       <li class="screenReader"><label for="checking" class="screenReader">If you want to submit this form, do not enter anything in this field</label><input type="text" name="checking" id="checking" class="screenReader" value="<?php if(isset($_POST['checking'])) echo $_POST['checking'];?>" /></li> 
       <li class="buttons"><input type="hidden" name="submitted" id="submitted" value="true" /><button type="submit">Email me &raquo;</button></li> 
      </ol> 
     </form> 

     <?php endwhile; ?> 
    <?php endif; ?> 
    <?php } ?> 

    <?php get_footer(); ?> 

JS：

  $(document).ready(function() { 
     $('form#contactForm').submit(function() { 
      $('form#contactForm .error').remove(); 
      var hasError = false; 
      $('.requiredField').each(function() { 
       if(jQuery.trim($(this).val()) == '') { 
        var labelText = $(this).prev('label').text(); 
        $(this).parent().append('<span class="error">You forgot to enter your '+labelText+'.</span>'); 
        hasError = true; 
       } else if($(this).hasClass('email')) { 
        var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/; 
        if(!emailReg.test(jQuery.trim($(this).val()))) { 
         var labelText = $(this).prev('label').text(); 
         $(this).parent().append('<span class="error">You entered an invalid '+labelText+'.</span>'); 
         hasError = true; 
        } 
       } 
      }); 
      if(!hasError) { 
       $('form#contactForm li.buttons button').fadeOut('normal', function() { 
        $(this).parent().append('<img src="/wp-content/themes/td-v3/images/template/loading.gif" alt="Loading&hellip;" height="31" width="31" />'); 
       }); 
       var formInput = $(this).serialize(); 
       $.post($(this).attr('action'),formInput, function(data){ 
        $('form#contactForm').slideUp("fast", function() {     
         $(this).before('<p class="thanks"><strong>Thanks!</strong> Your email was successfully sent. I check my email all the time, so I should be in touch soon.</p>'); 
        }); 
       }); 
      } 

      return false; 

     }); 
    }); 

Answer 1

提出したときにだけHTMLフォームのデフォルトの動作を妨げる：

$('form#contactForm').submit(function(event) { 
    event.preventDefault(); 
    // ... 
}