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

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