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)