Wizard varieties collects consumer enter in a number of steps. Every step will present a sub type to get good consideration from the consumer.
It processes step-by-step validation and let the consumer proceed ahead. It reduces the issue of resolving the shape errors altogether with a single web page type.
On this tutorial, we’ve seen the best way to create a wizard type with a earlier subsequent navigation. It may be used for a PHP utility to have a sequential stream of information assortment. Instance, 1) query and reply sequence, 2) Profile wizard and extra.
Steps to create a wizard type with PHP
- Design HTML for wizard sub-forms.
- Add previous-next navigation to maneuver forwards and backwards.
- Validate sub-form and limit navigation.
- Hold the submitted knowledge alongside the wizard.
- Retailer wizard type knowledge to a database in PHP.
1. Design HTML for wizard sub-forms
That is the HTML a part of the touchdown web page. It accommodates the sub-form HTML of the wizard.
It has 4 sections to point out cut up types of a purchase order order stream.
- Billing particulars.
- Transport particulars.
- Making use of {discount} code.
- Enter remarks on an order.
It has a stream graph to characterize customers’ state alongside the wizard. It accommodates circled nodes which are highlighted on completion.
index.php (wizard type HTML)
<!DOCTYPE html>
<html>
<head>
<title>How you can create a multi-step wizard type in PHP</title>
<hyperlink rel="stylesheet" sort="textual content/css" href="https://phppot.com/php/wizard-form/css/model.css" />
<hyperlink rel="stylesheet" sort="textual content/css" href="css/type.css" />
<hyperlink rel="stylesheet" sort="textual content/css" href="css/wizard.css" />
</head>
<physique>
<div class="phppot-container">
<h1>How you can create a multi-step wizard type in PHP</h1>
<type technique="POST" id="checkout-form" onSubmit="return validateCheckout()">
<div class="wizard-flow-chart">
<span class="fill">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
<?php if (isset($message)) { ?>
<div class="message <?php echo $sort; ?>"><?php echo $message; ?></div>
<?php } ?>
<!-- Wizard part 1 -->
<part id="billing-section">
<h3>Billing particulars</h3>
<div class="row">
<label class="float-left label-width">Identify</label>
<enter identify="customer_billing_name" sort="textual content">
</div>
<div class="row">
<label class="float-left label-width">E mail</label>
<enter identify="billing_email" sort="textual content">
</div>
<div class="row">
<label class="float-left label-width">State</label>
<enter identify="billing_state" sort="textual content">
</div>
<div class="row">
<label class="float-left label-width">Metropolis</label>
<enter identify="billing_city" sort="textual content">
</div>
<div class="row">
<label class="float-left label-width">Nation</label>
<enter identify="billing_country" sort="textual content">
</div>
<div class="row">
<label class="float-left label-width">Zip</label>
<enter identify="billing_zipcode" sort="textual content">
</div>
<div class="row button-row">
<button sort="button" onClick="validate(this)">Subsequent</button>
</div>
</part>
<!-- Wizard part 2 -->
<part id="shipping-section" class="display-none">
<h3>Transport particulars</h3>
<div class="row">
<label class="float-left label-width">Identify</label>
<enter identify="customer_shipping_name" sort="textual content">
</div>
<div class="row">
<label class="float-left label-width">E mail</label>
<enter identify="shipping_email" sort="textual content">
</div>
<div class="row">
<label class="float-left label-width">State</label>
<enter identify="shipping_state" sort="textual content">
</div>
<div class="row">
<label class="float-left label-width">Metropolis</label>
<enter identify="shipping_city" sort="textual content">
</div>
<div class="row">
<label class="float-left label-width">Nation</label>
<enter identify="shipping_country" sort="textual content">
</div>
<div class="row">
<label class="float-left label-width">Zip</label>
<enter identify="shipping_zipcode" sort="textual content">
</div>
<div class="row button-row">
<button sort="button" onClick="showPrevious(this)">Earlier</button>
<button sort="button" onClick="validate(this)">Subsequent</button>
</div>
</part>
<!-- Wizard part 3 -->
<part id="discount-section" class="display-none">
<h3>Apply {discount}:</h3>
<div class="row"><label>Coupon code</label>
<enter identify="discount_coupon" sort="textual content" onClick="validate(this)">
</div>
<div class="row button-row">
<button sort="button" onClick="showPrevious(this)">Earlier</button>
<button sort="button" onClick="validate(this)">Subsequent</button>
</div>
</part>
<!-- Wizard part 4 -->
<part id="others-section" class="display-none">
<h3>Others:</h3>
<div class="row">
<label>Notes</label>
<textarea identify="notes" rows="4" cols="50" id="notes"></textarea>
</div>
<div class="row button-row">
<button sort="button" onClick="showPrevious(this)">Earlier</button>
<button sort="submit">Checkout</button>
</div>
</part>
</type>
</div>
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="nameless"></script>
<script src="js/wizard.js"></script>
</physique>
</html>
2. Add previous-next navigation to maneuver forwards and backwards
The showPrevious and showNextWizardSection JS capabilities are created to deal with the wizard navigation.
Transfer to the earlier type from any step is unconditional. However, transferring to the subsequent type is restricted by a validation course of.
3. Validate sub-form and limit navigation
On clicking the “subsequent” button, the shape validation script known as. It iterates the present subform fields to validate.
Presently, the validation script solely checks if the shape discipline is empty. For the reason that billing and delivery sub-forms include e mail fields, we are able to add e mail discipline validation to this JS.
If the validation step returns a boolean true, then it permits the consumer to maneuver subsequent.
js/wizard.js
perform validate(button) {
var wizardSection = $(button).closest("part");
var legitimate = true;
$(this).css("border", "1px stable #9a9a9a");
$(wizardSection).discover("enter").every(perform () {
if ($(this).val() == "") {
legitimate = false;
$(this).css("border", "purple 1px stable");
}
});
if (legitimate == true) {
showNextWizardSection(wizardSection);
}
}
perform showNextWizardSection(wizardSection) {
$("part").addClass("display-none");
$(wizardSection).subsequent("part").removeClass("display-none");
$(".wizard-flow-chart span.fill").subsequent("span").addClass("fill");
}
perform showPrevious(button) {
var wizardSection = $(button).closest("part");
$("part").addClass("display-none");
$(wizardSection).prev("part").removeClass("display-none");
$(".wizard-flow-chart span.fill").final().removeClass("fill");
}
perform validateCheckout() {
if ($("#notes").val() == "") {
$("#notes").css("border", "purple 1px stable");
return false;
}
}
4. Hold the submitted knowledge alongside the wizard
There are various methods to maintain the submitted knowledge persistent. Posting the submitted knowledge through the $_POST technique will maintain the shape knowledge on this world array.
This instance has a cut up up of a single-form entity. The earlier and subsequent buttons will not be submitting the shape. Reasonably, it reveals and hides the wizard varieties based mostly on the progress.
As soon as reaching the ultimate step it permits posting the shape on checkout the order.
It can be enhanced to retailer the entered knowledge in a session or a database. It would make the wizard persistent much more after the web page refresh.
5. Retailer wizard type knowledge to a database in PHP
This part makes this instance usable in an utility dynamically. It provides the PHP code to retailer the order particulars in a database.
As soon as the wizard type is posted after checkout, this PHP script prepares the beneath INSERT question to construct the order particulars parameters to be saved.
index.php (Wizard type knowledge insert)
<?php
if (!empty($_POST)) {
require_once __DIR__ . "/lib/DataSource.php";
$database = new DataSource();
// Retailer wizard type knowledge to publish
$question = "INSERT INTO tbl_order (billing_name, billing_email, billing_state, billing_city, billing_country, billing_zip, shipping_name, shipping_email, shipping_state, shipping_city, shipping_country, shipping_zip, discount_code, notes) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)";
$paramType="ssssssssssssss";
$paramValue = array(
$_POST["customer_billing_name"],
$_POST["billing_email"],
$_POST["billing_state"],
$_POST["billing_city"],
$_POST["billing_country"],
$_POST["billing_zipcode"],
$_POST["customer_shipping_name"],
$_POST["shipping_email"],
$_POST["shipping_state"],
$_POST["shipping_city"],
$_POST["shipping_country"],
$_POST["shipping_zipcode"],
$_POST["discount_coupon"],
$_POST["notes"],
);
$insertId = $database->insert($question, $paramType, $paramValue);
if (!empty($insertId)) {
$message = "Thanks in your order!";
$sort = "success";
unset($_POST);
} else {
$message = "Drawback in insertion. Strive Once more!";
$sort = "error";
}
}
?>
Database script
sql/construction.sql
CREATE TABLE `tbl_order` (
`id` int(11) NOT NULL,
`billing_name` varchar(255) DEFAULT NULL,
`billing_email` varchar(255) DEFAULT NULL,
`billing_state` varchar(255) DEFAULT NULL,
`billing_city` varchar(255) DEFAULT NULL,
`billing_country` varchar(255) DEFAULT NULL,
`billing_zip` varchar(255) DEFAULT NULL,
`shipping_name` varchar(255) DEFAULT NULL,
`shipping_email` varchar(255) DEFAULT NULL,
`shipping_state` varchar(255) DEFAULT NULL,
`shipping_city` varchar(255) DEFAULT NULL,
`shipping_country` varchar(255) DEFAULT NULL,
`shipping_zip` varchar(255) DEFAULT NULL,
`discount_code` varchar(255) DEFAULT NULL,
`notes` varchar(255) DEFAULT NULL,
`created_at` timestamp NOT NULL DEFAULT current_timestamp() ON UPDATE current_timestamp()
);
--
-- Indexes for desk `tbl_order`
--
ALTER TABLE `tbl_order`
ADD PRIMARY KEY (`id`);
ALTER TABLE `tbl_order`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;
