multi step form using jquery bootstrap and php
php code / April 26, 2018
Multi-Step-Form is a Full Responsive Multi Step PHP Working Multipurpose Ajax Form with Required field jQuery approval based on PHP, HTML5/CSS3, jQuery and Ajax. Code written just by which you can without much of a stretch coordinated at your site
Multi-Step-Form Responsive PHP Working Multi Step Ajax Form can be utilized for your association, organization, business. With the goal that your guests, clients, customers, operators, individuals can utilize this frame to get Quote as well as let you know their administration worry through the shape. Utilizing this Plugin you can oversee Multi Step frame. We have done all setup PHP, jQuery and Ajax, so no page reload will happen. Get the IP of the sender inside the email body and this shape has Anti Spam (straightforward Math Captcha) human check.
Multi-Step-Form is a responsive, spotless, very much reported Ajax Form. It can be just incorporated at your site with the documentation help. Every one of the codes are spotless, very much remarked and efficient with legitimate help documentation. It looks extraordinary with a wide range of gadgets. Experiment with the demo.
Presently a day’s Multi Step Forms are more prominent because of more clients inviting. The Multi Step Form gives simple well ordered method to finish long FORM. At the point when there is long FORM with an excessive number of fields, you can break the extensive FORM into different littler Forms with few information fields on each Form to make it more helpful for clients. So in this instructional exercise you figure out how to actualize Multi Step Form with Progress Bar utilizing jQuery. We will outline Multi Step Form with Progress Bar utilizing Bootstrap and handle ventures to show diverse structures utilizing jQuery and
- db_connect.php
- index.php
- multi_form_action.php
- form.js
- In this instructional exercise we will execute usefulness to make client account with numerous structures. For this we require a database table to store client points of interest. So we will make table client to store client account subtle elements utilizing beneath MySQL question.
Step by step Code here
step 1: created container.php
</head>
<body class=””>
<div role=”navigation” class=”navbar navbar-default navbar-static-top”>
<div class=”container”>
<div class=”navbar-header”>
<button data-target=”.navbar-collapse” data-toggle=”collapse” class=”navbar-toggle” type=”button”>
<span class=”sr-only”>Toggle navigation</span>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
</button>
<a href=”#” class=”navbar-brand”>PHPCODE</a>
</div>
<div class=”navbar-collapse collapse”>
<ul class=”nav navbar-nav”>
<li class=”active”><a href=”#”>Home</a></li>
</ul>
</div><!–/.nav-collapse –>
</div>
</div>
<div class=”container” style=”min-height:500px;”>
<div class=”>
</div>
step 2: created db_connect.php
<?php
/* Database connection start */
$servername = “localhost”;
$username = “root”;
$password = “”;
$dbname = “demos”;
$conn = mysqli_connect($servername, $username, $password, $dbname) or die(“Connection failed: ” . mysqli_connect_error());
if (mysqli_connect_errno()) {
printf(“Connect failed: %sn”, mysqli_connect_error());
exit();
}
?>
step 3: created header.php
<!DOCTYPE html>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css”>
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css”>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js”></script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js”></script>
<!– jQuery –>
step 4: created footer.php
<div class=”insert-post-ads1″ style=”margin-top:20px;”>
</div>
</div>
</body></html>
step 5: created index.php
<?php
include(‘header.php’);
?>
<title>phpcode : Demo Multi Step Form using jQuery, Bootstrap and PHP</title>
<script type=”text/javascript” src=”script/form.js”></script>
<style type=”text/css”>
#register_form fieldset:not(:first-of-type) {
display: none;
}
</style>
<?php include(‘container.php’);?>
<div class=”container”>
<h2>Example: Multi Step Form using jQuery, Bootstrap and PHP</h2>
<div class=”progress”>
<div class=”progress-bar progress-bar-striped active” role=”progressbar” aria-valuemin=”0″ aria-valuemax=”100″></div>
</div>
<div class=”alert alert-success hide”></div>
<form id=”register_form” novalidate action=”form_action.php” method=”post”>
<fieldset>
<h2>Step 1: Add Account Details</h2>
<div class=”form-group”>
<label for=”email”>Email address*</label>
<input type=”email” class=”form-control” required id=”email” name=”email” placeholder=”Email”>
</div>
<div class=”form-group”>
<label for=”password”>Password*</label>
<input type=”password” class=”form-control” name=”password” id=”password” placeholder=”Password”>
</div>
<input type=”button” class=”next-form btn btn-info” value=”Next” />
</fieldset>
<fieldset>
<h2> Step 2: Add Personal Details</h2>
<div class=”form-group”>
<label for=”first_name”>First Name</label>
<input type=”text” class=”form-control” name=”first_name” id=”first_name” placeholder=”First Name”>
</div>
<div class=”form-group”>
<label for=”last_name”>Last Name</label>
<input type=”text” class=”form-control” name=”last_name” id=”last_name” placeholder=”Last Name”>
</div>
<input type=”button” name=”previous” class=”previous-form btn btn-default” value=”Previous” />
<input type=”button” name=”next” class=”next-form btn btn-info” value=”Next” />
</fieldset>
<fieldset>
<h2>Step 3: Add Contact Information</h2>
<div class=”form-group”>
<label for=”mobile”>Mobile*</label>
<input type=”text” class=”form-control” name=”mobile” id=”mobile” placeholder=”Mobile Number”>
</div>
<div class=”form-group”>
<label for=”address”>Address</label>
<textarea class=”form-control” name=”address” placeholder=”Communication Address”></textarea>
</div>
<input type=”button” name=”previous” class=”previous-form btn btn-default” value=”Previous” />
<input type=”submit” name=”submit” class=”submit btn btn-success” value=”Submit” />
</fieldset>
</form>
<div style=”margin:50px 0px 0px 0px;”>
<a class=”btn btn-default read-more” style=”background:#3399ff;color:white” href=”#” title=””>Back to Tutorial</a>
</div>
</div>
<?php include(‘footer.php’);?>
step 6: created multi_form_action.php
<?php
include(‘header.php’);
include_once(“db_connect.php”);
?>
<title>phpcode : Demo Multi Step Form using jQuery, Bootstrap and PHP</title>
<?php include(‘../container.php’);?>
<div class=”container”>
<h2>Example: Multi Step Form using jQuery, Bootstrap and PHP</h2>
<div class=”row well alert alert-success”>
<?php
if (isset($_POST[‘submit’])) {
$email = mysqli_real_escape_string($conn, $_POST[’email’]);
$password = mysqli_real_escape_string($conn, $_POST[‘password’]);
$first_name = mysqli_real_escape_string($conn, $_POST[‘first_name’]);
$last_name = mysqli_real_escape_string($conn, $_POST[‘last_name’]);
$mobile = mysqli_real_escape_string($conn, $_POST[‘mobile’]);
$address = mysqli_real_escape_string($conn, $_POST[‘address’]);
if(mysqli_query($conn, “INSERT INTO user(email, pass, first_name, last_name, mobile, address) VALUES(‘”.$email.”‘, ‘” . $password . “‘, ‘”. $first_name.”‘, ‘”.$last_name.”‘, ‘”.$mobile.”‘, ‘”. $address.”‘)”)) {
echo “You’re Registered Successfully!”;
} else {
echo “Error in registering…Please try again later!”;
}
}
?>
</div>
<div style=”margin:50px 0px 0px 0px;”>
<a class=”btn btn-default read-more” style=”background:#3399ff;color:white” href=”#” title=””>Back to Tutorial</a>
</div>
</div>
<?php include(‘footer.php’);?>
step 7: created user.sql
CREATE TABLE IF NOT EXISTS `user` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`email` varchar(100) NOT NULL,
`password` varchar(100) NOT NULL,
`first_name` varchar(100) NOT NULL,
`last_name` varchar(100) NOT NULL,
`mobile` int(11) NOT NULL,
`address` text NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;
step 8: created form.js
$(document).ready(function(){
var form_count = 1, previous_form, next_form, total_forms;
total_forms = $(“fieldset”).length;
$(“.next-form”).click(function(){
previous_form = $(this).parent();
next_form = $(this).parent().next();
next_form.show();
previous_form.hide();
setProgressBarValue(++form_count);
});
$(“.previous-form”).click(function(){
previous_form = $(this).parent();
next_form = $(this).parent().prev();
next_form.show();
previous_form.hide();
setProgressBarValue(–form_count);
});
setProgressBarValue(form_count);
function setProgressBarValue(value){
var percent = parseFloat(100 / total_forms) * value;
percent = percent.toFixed();
$(“.progress-bar”)
.css(“width”,percent+”%”)
.html(percent+”%”);
}
// Handle form submit and validation
$( “#register_form” ).submit(function(event) {
var error_message = ”;
if(!$(“#email”).val()) {
error_message+=”Please Fill Email Address”;
}
if(!$(“#password”).val()) {
error_message+=”<br>Please Fill Password”;
}
if(!$(“#mobile”).val()) {
error_message+=”<br>Please Fill Mobile Number”;
}
// Display error if any else submit form
if(error_message) {
$(‘.alert-success’).removeClass(‘hide’).html(error_message);
return false;
} else {
return true;
}
});
});
Comments
No comments yet, take the initiative.
Leave a Reply