Contact form (successful submission & reset )

Question

I have this contact form with

1- contactform.js (for validation

2- contactform.php (for posting & delivering form information)

3- the HTML that contains the form front end

The contact form is working fine in filling and delivering information

The problem is that after submitting the success message doesn't appear and the page doesn't refresh with the current information

please advice...

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

The error div in your code appears only in case of error

Change your ajax line with this, may help you :

    $.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;
  });

Answer 2

$("#myForm").validate({
  submitHandler: function (form) {
                 console.log('test');
                 form.submit();
                      }
                  });