javascript - 联系表(成功提交并重置)

Question

我有此联系表

1- contactform.js(用于验证

2- contactform.php(用于发布和传递表单信息)

3-包含表单前端的 HTML

联系表单在填写和传递信息方面运行良好

问题是提交后没有出现成功消息，并且页面没有刷新当前信息

请指教...

jQuery(document).ready(function($) {
      "use strict";
    
      //Contact
      $('form.contactForm').submit(function() {
        var f = $(this).find('.form-group'),
          ferror = false,
          emailExp = /^[^\s()<>@,;:\/]+@\w[\w\.-]+\.[a-z]{2,}$/i;
    
        f.children('input').each(function() { // run all inputs
    
          var i = $(this); // current input
          var rule = i.attr('data-rule');
    
          if (rule !== undefined) {
            var ierror = false; // error flag for current input
            var pos = rule.indexOf(':', 0);
            if (pos >= 0) {
              var exp = rule.substr(pos + 1, rule.length);
              rule = rule.substr(0, pos);
            } else {
              rule = rule.substr(pos + 1, rule.length);
            }
    
            switch (rule) {
              case 'required':
                if (i.val() === '') {
                  ferror = ierror = true;
                }
                break;
    
              case 'minlen':
                if (i.val().length < parseInt(exp)) {
                  ferror = ierror = true;
                }
                break;
    
              case 'email':
                if (!emailExp.test(i.val())) {
                  ferror = ierror = true;
                }
                break;
    
              case 'checked':
                if (!i.attr('checked')) {
                  ferror = ierror = true;
                }
                break;
    
              case 'regexp':
                exp = new RegExp(exp);
                if (!exp.test(i.val())) {
                  ferror = ierror = true;
                }
                break;
            }
            i.next('.validation').html((ierror ? (i.attr('data-msg') !== undefined ? i.attr('data-msg') : 'wrong Input') : '')).show('blind');
          }
        });
        f.children('textarea').each(function() { // run all inputs
    
          var i = $(this); // current input
          var rule = i.attr('data-rule');
    
          if (rule !== undefined) {
            var ierror = false; // error flag for current input
            var pos = rule.indexOf(':', 0);
            if (pos >= 0) {
              var exp = rule.substr(pos + 1, rule.length);
              rule = rule.substr(0, pos);
            } else {
              rule = rule.substr(pos + 1, rule.length);
            }
    
            switch (rule) {
              case 'required':
                if (i.val() === '') {
                  ferror = ierror = true;
                }
                break;
    
              case 'minlen':
                if (i.val().length < parseInt(exp)) {
                  ferror = ierror = true;
                }
                break;
            }
            i.next('.validation').html((ierror ? (i.attr('data-msg') != undefined ? i.attr('data-msg') : 'wrong Input') : '')).show('blind');
          }
        });
        if (ferror) return false;
        else var str = $(this).serialize();
        var action = $(this).attr('action');
        if( ! action ) {
          action = 'contactform/contactform.php';
        }
        $.ajax({
          type: "POST",
          url: action,
          data: str,
          success: function(msg) {
            // alert(msg);
            if (msg == 'OK') {
              $("#sendmessage").addClass("show");
              $("#errormessage").removeClass("show");
              $('.contactForm').find("input, textarea").val("");
            } else {
              $("#sendmessage").removeClass("show");
              $("#errormessage").addClass("show");
              $('#errormessage').html(msg);
            }
    
          }
        });
        return false;
      });
    
    });

 <div class="form">
              <div id="sendmessage">Your message has been sent. Thank you!</div>
              <div id="errormessage"></div>
              <form action="" method="post" role="form" class="contactForm">
                <div class="form-row">
                  <div class="form-group col-md-6">
                    <input type="text" name="name" class="form-control" id="name" placeholder="Your Name" data-rule="minlen:4" data-msg="Please enter at least 4 chars" />
                    <div class="validation"></div>
                  </div>
                  <div class="form-group col-md-6">
                    <input type="email" class="form-control" name="email" id="email" placeholder="Your Email" data-rule="email" data-msg="Please enter a valid email" />
                    <div class="validation"></div>
                  </div>
                </div>
                <div class="form-group">
                  <input type="text" class="form-control" name="subject" id="subject" placeholder="Subject" data-rule="minlen:4" data-msg="Please enter at least 8 chars of subject" />
                  <div class="validation"></div>
                </div>
                <div class="form-group">
                  <textarea class="form-control" name="message" rows="5" data-rule="required" data-msg="Please write something for us" placeholder="Message"></textarea>
                  <div class="validation"></div>
                </div>
                <div class="text-center"><button type="submit">Send Message</button></div>								<span>
    <a href="#" onclick="document.getElementById('captcha').src = 'cap/securimage_show.php?' + Math.random(); return false"><img alt="" height="20" src="cap/refresh.gif" width="22" align="middle" /></a>
    </span>
    
    <span>
    <input style="background:#FFFFFF" type="text" name="captcha_code" size="10" maxlength="6" />
    </span>
    
    
    <span>
    <img id="captcha" src="cap/securimage_show.php" alt="CAPTCHA Image" height="40" width="114" />
    </span>
    
              </form>

<?php session_start(); ?>
<?php
include_once 'cap/securimage.php';
$securimage = new Securimage();
if ($securimage->check($_POST['captcha_code']) == false) {

  die('The code you entered was incorrect.  Go back and try again.');
  }
$name = $_POST['name'];
$email = $_POST['email'];
$subject = $_POST['subject'];
$message = $_POST['message'];


{
$message="Dear ".$name."
name:".$name."
email:".$email."
subject:".$subject."
message:".$message."

";
$message = stripslashes($message);
$to = '' . ', ';
$to .= $email .',';
$subject = '';
$from = "\n";
$from.= "Content-Type: text/html; charset=utf-8\n"; 
mail($to,$subject,$message,$from);
?><?php  
}
?>

Answer 1

代码中的错误 div 仅在出现错误时出现

用这个改变你的ajax行，可能会帮助你:

    $.ajax({
      type: "POST",
      url: action,
      data: str,
      success: function(msg) {
        if (msg == 'OK') {
          msg = 'success';
          $("#sendmessage").addClass("show");
          /* showing the message */
          $("#errormessage").addClass("show");
          $('#errormessage').html(msg);
          $('.contactForm').find("input, textarea").val("");
        } else {
          msg = 'failed';
          $("#sendmessage").removeClass("show");
          $("#errormessage").addClass("show");
          $('#errormessage').html(msg);
        }

      }
    });
    return false;
  });