https://fantasticsimilan.com/js/contact-form.js

1/* ---------------------------------------------
2 Contact form
3 --------------------------------------------- */
4$(document).ready(function(){
5    $("#submit_btn").click(function(){
6        
7        //get input field values
8        var user_name = $('input[name=name]').val();
9        var user_email = $('input[name=email]').val();
10        var user_message = $('textarea[name=message]').val();
11        
12        //simple validation at client's end
13        //we simply change border color to red if empty field using .css()
14        var proceed = true;
15        if (user_name == "") {
16            $('input[name=name]').css('border-color', '#e41919');
17            proceed = false;
18        }
19        if (user_email == "") {
20            $('input[name=email]').css('border-color', '#e41919');
21            proceed = false;
22        }
23        
24        if (user_message == "") {
25            $('textarea[name=message]').css('border-color', '#e41919');
26            proceed = false;
27        }
28        
29        //everything looks good! proceed...
30        if (proceed) {
31            //data to be sent to server
32            post_data = {
33                'userName': user_name,
34                'userEmail': user_email,
35                'userMessage': user_message
36            };
37            
38            //Ajax post data to server
39            $.post('contact_me.php', post_data, function(response){
40            
41                //load json data from server and output message     
42                if (response.type == 'error') {
43                    output = '<div class="error">' + response.text + '</div>';
44                }
45                else {
46                
47                    output = '<div class="success">' + response.text + '</div>';
48                    
49                    //reset values in all input fields
50                    $('#contact_form input').val('');
51                    $('#contact_form textarea').val('');
52                }
53                
54                $("#result").hide().html(output).slideDown();
55            }, 'json');
56            
57        }
58        
59        return false;
60    });
61    
62    //reset previously set border colors and hide all message on .keyup()
63    $("#contact_form input, #contact_form textarea").keyup(function(){
64        $("#contact_form input, #contact_form textarea").css('border-color', '');
65        $("#result").slideUp();
66    });
67    
68});