https://azmeruq.github.io/js/contact_me.js

1$(function() {
2
3  $("#contactForm input,#contactForm textarea").jqBootstrapValidation({
4    preventSubmit: true,
5    submitError: function($form, event, errors) {
6      // additional error messages or events
7    },
8    submitSuccess: function($form, event) {
9      event.preventDefault(); // prevent default submit behaviour
10      // get values from FORM
11      var name = $("input#name").val();
12      var email = $("input#email").val();
13      //var phone = $("input#phone").val();
14      var message = $("textarea#message").val();
15      var firstName = name; // For Success/Failure Message
16      // Check for white space in name for Success/Fail message
17      if (firstName.indexOf(' ') >= 0) {
18        firstName = name.split(' ').slice(0, -1).join(' ');
19      }
20      $this = $("#sendMessageButton");
21      $this.prop("disabled", true); // Disable submit button until AJAX call is complete to prevent duplicate messages
22      $.ajax({
23        url: "././mail/contact_me.php",
24        type: "POST",
25        data: {
26          name: name,
27          //phone: phone,
28          email: email,
29          message: message
30        },
31        cache: false,
32        success: function() {
33          // Success message
34          $('#success').html("<div class='alert alert-success'>");
35          $('#success > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
36            .append("</button>");
37          $('#success > .alert-success')
38            .append("<strong>Your message has been sent. </strong>");
39          $('#success > .alert-success')
40            .append('</div>');
41          //clear all fields
42          $('#contactForm').trigger("reset");
43        },
44        error: function() {
45          // Fail message
46          $('#success').html("<div class='alert alert-danger'>");
47          $('#success > .alert-danger').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
48            .append("</button>");
49          $('#success > .alert-danger').append($("<strong>").text("Sorry " + firstName + ", it seems that my mail server is not responding. Please try again later!"));
50          $('#success > .alert-danger').append('</div>');
51          //clear all fields
52          $('#contactForm').trigger("reset");
53        },
54        complete: function() {
55          setTimeout(function() {
56            $this.prop("disabled", false); // Re-enable submit button when AJAX call is complete
57          }, 1000);
58        }
59      });
60    },
61    filter: function() {
62      return $(this).is(":visible");
63    },
64  });
65
66  $("a[data-toggle=\"tab\"]").click(function(e) {
67    e.preventDefault();
68    $(this).tab("show");
69  });
70});
71
72/*When clicking on Full hide fail/success boxes */
73$('#name').focus(function() {
74  $('#success').html('');
75});