<script type="text/javascript">
            $(function(){
                $('#response').hide();
                $('#send').on( 'click', function ( e ) {
                    e.preventDefault();
                    //hide response if it's visible
                    //we grab all fields values to create our email
                    //$( '#response' ).html( "All is OK " ).fadeIn( 'slow' ).delay( 3000 ).fadeOut( 'slow' );
                    var name = $( '#name' ).val();
                    var email = $( '#email' ).val();
                    var message = $( '#message' ).val();
                    if ( name === '' || email === '' || message === '')
                    {
                        //all fields are rquired so if one of them is empty the function returns
                        if($( '#response' ).hasClass('alert-success')){
                            $( '#response' ).removeClass('alert-success');
                            $( '#response' ).addClass('alert-danger');
                        }else{
                            $( '#response' ).addClass('alert-danger');
                        }
                        $( '#response' ).html('<i class="fas fa-times"></i>  Please, fill all the fields!').fadeIn( 'slow' ).delay( 3000 ).fadeOut( 'slow' );
                    }else{

                        //if it's all right we proceed
                        $.ajax( {
                            type: 'post',
                            //our baseurl variable in action will call the sendemail() method in our default controller
                            url: baseUrl + 'contact/sendContactEmail',
                            data: { name: name, email: email, message: message },
                            success: function ( result )
                            {
                                //console.log(result);
                                //alert(JSON.stringify(result));
                                //Ajax call success and we can show the value returned by our controller function
                                if($( '#response' ).hasClass('alert-danger')){
                                    $( '#response' ).removeClass('alert-danger');
                                    $( '#response' ).addClass('alert-success');
                                }else{
                                    $( '#response' ).addClass('alert-success');
                                }
                                $( '#response' ).html('<i class="fas fa-times"></i> '+result).fadeIn( 'slow' ).delay( 3000 ).fadeOut( 'slow' );
                                $( '#name' ).val( '' );
                                $( '#email' ).val( '' );
                                $( '#message' ).val( '' );
                            },
                            error: function ( result )
                            {
                                //console.log(result);
                                //alert(JSON.stringify(result));
                                if($( '#response' ).hasClass('alert-success')){
                                    $( '#response' ).removeClass('alert-success');
                                    $( '#response' ).addClass('alert-danger');
                                }else{
                                    $( '#response' ).addClass('alert-danger');
                                }
                                //Ajax call failed, so we inform the user something went wrong
                                $( '#response' ).html( '<i class="fas fa-times"></i>'+result ).fadeIn( 'slow' ).delay( 3000 ).fadeOut( 'slow' );
                                $( '#name' ).val( '' );
                                $( '#email' ).val( '' );
                                $( '#message' ).val( '' );
                            }
                        } );
                    }
                });

            });
        </script>