Create Multi-Step Form Submission In PHP Using jQuery
--
Hi Friends, In this tutorial, we will learn how to create multi-step form submission in PHP using jQuery. It is very simple and in order to do this, please follow the below steps one by one.
- We have to create a table in our database.
I have a table name “stepformtbl” in my database.
DDL information of the table
CREATE TABLE stepformtbl (id int(10) unsigned NOT NULL AUTO_INCREMENT,username varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL,password varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL,phone_no varchar(20) COLLATE utf8mb4_unicode_ci DEFAULT NULL,address varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL,created_at timestamp NOT NULL DEFAULT current_timestamp() ON UPDATE current_timestamp(),updated_at timestamp NOT NULL DEFAULT ‘0000-00-00 00:00:00’,
PRIMARY KEY (id)
) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci
2. Create the input fields in HTML using active tabs and inactive tabs to identify the input fields according to the tabs. We will do this with the help of jQuery. In the HTML file, the id attribute of each input field is very important.
By using the id of input fields, we will do the validation part. Please follow the below HTML code to understand how the input fields are changing according to the navigation tabs.
HTML Code:-
If you look at the HTML code, I have created two navigation tabs with class names “active tab1” and “inactive tab1” with the id attribute of each inside the hyperlink tag.
Also read, Insert Multiple Rows into MySQL with PHP Using Foreach Arrays
jQuery multi-step form submission example
3. Validate the input fields using jQuery to proceed to the next step. If you do not enter the information in the first step or in the previous step then you can not proceed to the next step. This is done by only Jquery.
if you look at the above code validation starts with the if else condition. If information is empty then it will ask you to enter the required information. If it is ok then it will move to the else condition.
Steps while clicking on the NEXT button
When we click on the NEXT button, the following classes of jquery are applied.
- removeClass().
- addClass().
- removeAttr().
- attr().
- data-toggle property
data-toggle is basically used to jump from one div to another div.
If you want to know these classes in detail then follow this link Jquery classes with examples.
So, after clicking on the next button, we will remove the section of the active tab with the help of removeClass().
We will add the section of inactive tab with the help of addClass().
We will get all the attributes, input fields, and id of the personal details tab using the attr() method of Jquery.
4. If the validation is ok then it is time to submit the data to the database. We will do this with help of PHP.
Complete Code:-
NOTE*
Download the bootstrap css and js files from google and include the path of the files in the href attribute of link tag and src attribute of the script tag respectively.
Also Read, CRUD Operation In Laravel 5.8 Step By Step For Beginners
CONCLUSION:- I hope this article will help you to create multi-step form submission in PHP using jQuery. If you have any doubt then please leave your comment below.
