<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Send An Email</title>
</head>
<body>
    <center>
        <h4 class="send-notification"></h4>
        <form id="myForm">
            <h2>Send An Email</h2>
            <label for="name">Name</label>
            <input id="name" type="text" placeholder="Enter Name">
            <br/><br/>
            <label for="email">Email</label>
            <input id="email" type="text" placeholder="Enter Email">
            <br/><br/>
            <label for="subject">Subject</label>
            <input id="subject" type="text" placeholder="Enter Subject">
            <br/><br/>
            <p>Message</p>
            <textarea id="body" rows="5" placeholder="Type Message"></textarea>
            <br/><br/>
            <button type="button" onclick="sendEmail();" value="Send An Email">Submit!!</button>
        </form>
    </center>

    <script src="http://code.jquery.com/jquery-3.5.1.min.js"></script>

    <script type="text/javascript">

    function sendEmail(){
        var name = $("#name");
        var email = $("#email");
        var subject = $("#subject");
        var body = $("#body");
        //alert("It comes in here");

        if(isNotEmpty(name) && isNotEmpty(email) && isNotEmpty(subject) && isNotEmpty(body)){
            $.ajax({
                url:'sendMail.php',
                method:'POST',
                dataType:'json',
                data:{
                    name: name.val(),
                    email: email.val(),
                    subject: subject.val(),
                    body: body.val()
                },
                success: function(m){
                    
                    alert("the response is : " + m.response);
                    $("#myForm")[0].reset();
                    $(".send-notification").text("Message Send SuccessFul.");
                }   
            });
        }
    }

    function isNotEmpty(caller){
        return true;
    }

    </script>

</body>
</html>