When we all learned saving form data to a database using PHP mostly, we came across the concept of adding method as POST and action as to where you wanted the action to be performed. Over time you may have realized that you may not want to submit data using this method as it forces the page to refresh when you click the submit button which is not always a good practice for users.
In this article, we shall guide you through the steps of how to submit form data using JQuery without refreshing the page. JQuery is a JavaScript library that is rich with features and it is used to make JavaScript work much easier on the website. You may ask yourself why should I abandon the previous method and start submitting data using jQuery, the answer is as follows
- JQuery is a lightweight and fast
- JQuery loads data in the background and displays the result to users
- It allows you as a developer to track the progress of the request through the inspect feature provided by most browsers
- It provides the user with the ability to monitor the result/status of the request by displaying messages on the website application which helps him to understand what is happening at the current time
- It allows you to update pages with real-time data without reloading/ refreshing the page
To start with, ensure you initialize jQuery in the footer of your website (others include it in the head which will also work but it is mostly recommended in the footer so that your page can load faster). You can get jQuery latest file link in https://code.jquery.com/ and include it in your file as shown below
<html>
<head>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</body>
</html>
Having included the jQuery file, we can now create our form which we want to submit its data, our form fields will be customer name, customer phone, and customer email.
To start with once you define the form add the id attribute which will be used during submission to clearly identify which form is being referred to. Next will be defining the form elements as shown below
<html>
<head>
</head>
<body>
<form role="form" id="customerform">
<label>Customer Name:</label>
<input type="text" name="customername" class="form-control" required>
<label>Customer Phone:</label>
<input type="text" name="customerphone" class="form-control" required>
<label>Customer Email:</label>
<input type="email" name="customeremail" class="form-control" required>
</form>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</body>
</html>
Next, it will be adding to submit button which when clicked it will trigger the submit function of the form with the id we have added above
<button type="submit">Submit</button>
Having defined the form with its attributes and elements, we now move to submit of the form data using jQuery
First, we should understand the terms used or required and how they are structured to ensure that data is submitted successfully. There are various methods that can be used but I will only show one method.
<script>
$("#customerform").submit(function(e){
e.preventDefault(); //prevents page from reloading
var form_data = $(this).serialize(); //Encode form elements for submission
$.ajax({
url : "savedata.php", // where to send form data
type: "POST", //method used to send data
data : form_data //form data
}).done(function(response){
alert(response) // you can alert the response
});
});
</script>
The function of each term I have highlighted it using the comments (//)
What is required is the url, type, and data
The full code including the form and jQuery is as shown below
<html>
<head>
</head>
<body>
<form role="form" id="customerform">
<label>Customer Name:</label>
<input type="text" name="customername" class="form-control" required>
<label>Customer Phone:</label>
<input type="text" name="customerphone" class="form-control" required>
<label>Customer Email:</label>
<input type="email" name="customeremail" class="form-control" required>
<button type="submit">Submit</button>
</form>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$("#customerform").submit(function(e){
e.preventDefault(); //prevents page from reloading
var form_data = $(this).serialize(); //Encode form elements for submission
$.ajax({
url : "savedata.php", // where to send form data
type: "POST", //method used to send data
data : form_data //form data
}).done(function(response){
alert(response) // you can alert the response
});
});
</script>
</body>
</html>
To interpret data sent and how it is returned, we are covering it in the APIS category section though also in our next tutorials we shall continue highlighting the next steps after submitting data.
We have covered the first steps in submitting form data using jQuery up to the point of submitting it to the URL file where it is processed.
