In this tutorial, we’ll explain to you how to submit a form without page refresh using jQuery, Ajax, PHP and MySQL.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<html>
<head> <title>Form submit without refresh</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body> <div id="container"> <form method="post" action="" id="contactform"> <div class="form-group"> <label for="name">Name:</label> <input type="text" class="form-control" id="name"> </div> <div class="form-group"> <label for="email">Email Address:</label> <input type="email" class="form-control" id="email"> </div> <div class="form-group"> <label for="message">Message:</label> <textarea name="message" class="form-control" id="message"></textarea> </div> <button type="submit" class="btn btn-primary">Submit</button> </form> <div class="result"> </div> </div>
</body>
</html><script>
$(document).ready(function () {
$('.btn-primary').click(function (e) {
e.preventDefault();
var name = $('#name').val();
var email = $('#email').val();
var message = $('#message').val();
$.ajax
({
type: "POST",
url: "form_submit.php",
data: { "name": name, "email": email, "message": message },
success: function (data) {
$('.result').html(data);
$('#contactform')[0].reset();
}
});
});
});
</script>
