Originally posted @ https://codeanddeploy.com visit and download the sample code: https://codeanddeploy.com/blog/php/reset-form-after-submitted-using-jquery
Advanced Laravel SAAS Starter Kit with CRUD Generator - GET YOUR COPY NOW!
In this tutorial, I will show you a simple code on how to reset the form after submission using jQuery. Let say you have a Create Employee Form and submit using ajax. Then since we are using ajax our page will not reloading but we need to clear the form data after successfully submitted to the server-side.
First, we will create our first index.html
<!doctype html>
<html lang="en">
<head>
<title>Reset Form After Submitted using Jquery</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- Page CSS -->
<link rel="stylesheet" href="assets/css/styles.css">
</head>
<body>
<div class="container">
<br><br>
<h1>Reset Form After Submitted using Jquery</h1>
<br><br>
<div class="row">
<div class="col-md-4">
<h3>Add New Employee</h3>
<form action="ajax.php" id="form">
<div class="form-group">
<label for="email">Email</label>
<input class="form-control" type="text" name="email">
</div>
<div class="form-group">
<label for="first_name">First Name</label>
<input class="form-control" type="text" name="first_name">
</div>
<div class="form-group">
<label for="last_name">Last Name</label>
<input class="form-control" type="text" name="last_name">
</div>
<div class="form-group">
<label for="address">Address</label>
<textarea class="form-control" type="text" name="address" rows="3"></textarea>
</div>
<button type="button" class="btn btn-primary" id="btnSubmit">Submit</button>
</form>
</div>
</div>
</div>
<!-- Must put our javascript files here to fast the page loading -->
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Bootstrap JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<!-- Page Script -->
<script src="assets/js/scripts.js"></script>
</body>
</html>
Then we have a simple PHP code, named ajax.php
<?php
echo "success";
?>
Then next our javascript file is called scripts.js.
function resetForm()
{
$('#form')[0].reset();
}
function submitForm()
{
$("#btnSubmit").on("click", function() {
var $this = $("#btnSubmit"); //submit button selector using ID
var $caption = $this.html();// We store the html content of the submit button
var form = "#form"; //defined the #form ID
var formData = $(form).serializeArray(); //serialize the form into array
var route = $(form).attr('action'); //get the route using attribute action
// Ajax config
$.ajax({
type: "POST", //we are using POST method to submit the data to the server side
url: route, // get the route value
data: formData, // our serialized array data for server side
beforeSend: function () {//We add this before send to disable the button once we submit it so that we prevent the multiple click
$this.attr('disabled', true).html("Processing...");
},
success: function (response) {//once the request successfully process to the server side it will return result here
$this.attr('disabled', false).html($caption);
// We will display the result using alert
alert(response);
// Reset form
resetForm();
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
// You can put something here if there is an error from submitted request
}
});
});
}
$(document).ready(function() {
submitForm();
});
As you can see from the above function we have resetForm() to call the form and reset the form data.
function resetForm()
{
$('#form')[0].reset();
}
Then I put it inside the success function of ajax to execute the function.
Advanced Laravel SAAS Starter Kit with CRUD Generator - GET YOUR COPY NOW!
I hope this tutorial can help you. Kindly visit here https://codeanddeploy.com/blog/php/reset-form-after-submitted-using-jquery if you want to download this code.
Thank you and Happy coding.
Top comments (0)