henideepak/How to send an email from JavaScript ?

## How to send an email from JavaScript ?
<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <title>How to send an email from JavaScript ?</title>
</head>

<body>
    <div class="container">
        <div class="d-grid gap-3 ">
            <h2 class="text-center">How to send an email from JavaScript ?</h2>
            <form class="row g-3 m-10 p-4" id="Inqueryform">
                <div class="col-md-6 mb-3">
                    <input type="text" class="form-control" name="fname" placeholder="First name" aria-label="First name">
                </div>
                <div class="col-md-6 mb-3">
                    <input type="text" class="form-control" name="lname" placeholder="Last name" aria-label="Last name">
                </div>
                <div class="col-md-6 mb-3">
                    <input type="text" class="form-control" name="email" placeholder="Email" aria-label="Email">
                </div>
                <div class="col-md-6 mb-3">
                    <input type="text" class="form-control" name="subject" placeholder="Subject" aria-label="Subject">
                </div>
                <div class="col-md-12 mb-3">
                    <textarea class="form-control" id="Textarea" placeholder="Please insert Your Message..!"></textarea>
                </div>
                <div class="col-12">
                    <button type="button" id="subbtn" class="btn btn-primary">Sign in</button>
                </div>
            </form>
        </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.3/dist/jquery.validate.min.js"></script>
    <script src="https://smtpjs.com/v3/smtp.js"></script>
    <script>
        $('form').validate({
            rules: {
                fname: "required",
                lname: "required",
                email: {
                    required: true,
                    email: true
                },
                subject: "required",
            },
            messages: {
                fname: "First Name field is required.",
                lname: "Last Name field is required.",
            }
        });
        $(document).ready(function() {
            $('#subbtn').click(function() {
                $validd = $('#Inqueryform').valid();
                console.log($validd);
                if ($validd == true) {
                    var $fname = $('input[name="fname"]').val();
                    var $lname = $('input[name="lname"]').val();
                    var $email = $('input[name="email"]').val();
                    var $subject = $('input[name="subject"]').val();
                    var $message = $('textarea#Textarea').val();
                    var $bodymessage = 'Name: ' + $fname + ' ' + $lname + '<br> Email: ' + $email + '<br> Message: ' + $message;
                    Email.send({
                        Host: "smtp.gmail.com",
                        Username: "username@emample.com",
                        Password: "password",
                        To: 'sendermail@example.com',
                        From: $email,
                        Subject: $subject,
                        Body: $bodymessage,
                    }).then(function(message) {
                        alert("mail sent successfully");
                        //$('#Inqueryform').submit();
                    });
                }
            });
        });
    </script>
</body>

</html>
	<!doctype html>
	<html lang="en">

	<head>
	<!-- Required meta tags -->
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
	<title>How to send an email from JavaScript ?</title>
	</head>

	<body>
	<div class="container">
	<div class="d-grid gap-3 ">
	<h2 class="text-center">How to send an email from JavaScript ?</h2>
	<form class="row g-3 m-10 p-4" id="Inqueryform">
	<div class="col-md-6 mb-3">
	<input type="text" class="form-control" name="fname" placeholder="First name" aria-label="First name">
	</div>
	<div class="col-md-6 mb-3">
	<input type="text" class="form-control" name="lname" placeholder="Last name" aria-label="Last name">
	</div>
	<div class="col-md-6 mb-3">
	<input type="text" class="form-control" name="email" placeholder="Email" aria-label="Email">
	</div>
	<div class="col-md-6 mb-3">
	<input type="text" class="form-control" name="subject" placeholder="Subject" aria-label="Subject">
	</div>
	<div class="col-md-12 mb-3">
	<textarea class="form-control" id="Textarea" placeholder="Please insert Your Message..!"></textarea>
	</div>
	<div class="col-12">
	<button type="button" id="subbtn" class="btn btn-primary">Sign in</button>
	</div>
	</form>
	</div>
	</div>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.3/dist/jquery.validate.min.js"></script>
	<script src="https://smtpjs.com/v3/smtp.js"></script>
	<script>
	$('form').validate({
	rules: {
	fname: "required",
	lname: "required",
	email: {
	required: true,
	email: true
	},
	subject: "required",
	},
	messages: {
	fname: "First Name field is required.",
	lname: "Last Name field is required.",
	}
	});
	$(document).ready(function() {
	$('#subbtn').click(function() {
	$validd = $('#Inqueryform').valid();
	console.log($validd);
	if ($validd == true) {
	var $fname = $('input[name="fname"]').val();
	var $lname = $('input[name="lname"]').val();
	var $email = $('input[name="email"]').val();
	var $subject = $('input[name="subject"]').val();
	var $message = $('textarea#Textarea').val();
	var $bodymessage = 'Name: ' + $fname + ' ' + $lname + '<br> Email: ' + $email + '<br> Message: ' + $message;
	Email.send({
	Host: "smtp.gmail.com",
	Username: "username@emample.com",
	Password: "password",
	To: 'sendermail@example.com',
	From: $email,
	Subject: $subject,
	Body: $bodymessage,
	}).then(function(message) {
	alert("mail sent successfully");
	//$('#Inqueryform').submit();
	});
	}
	});
	});
	</script>
	</body>

	</html>