https://codingblackfemales.com/js/contact_me.js

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