Menu
I am trying to learn PHP and came across Bootstrap Form wizard and wanted to give it a try.
I have made a basic registration form which should basically INSERT the values from the form to the database.
With normal form i have successfully registered using form submit button. But with this wizard i do not have a submit button, with few research i found that this type of form is handled with jquery and so on. I needed to understand how can i go ahead and use these forms to insert data into my database with POST.
PHP Code:
<?php
session_start();
include_once 'dbConnect.php';
if(!isset($_SESSION['user']))
{
header("Location: index.php");
}
$res=mysql_query("SELECT * FROM emp_table WHERE user_id=". $_SESSION['user']."");
$userRow=mysql_fetch_array($res);
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="description" content="A fully featured admin theme which can be used to build CRM, CMS, etc.">
<meta name="author" content="Coderthemes">
<link rel="shortcut icon" href="images/favicon_1.ico">
<title>Create New Customer</title>
<link rel="stylesheet" type="text/css" href="plugins/jquery.steps/demo/css/jquery.steps.css">
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="css/core.css" rel="stylesheet" type="text/css">
<link href="css/components.css" rel="stylesheet" type="text/css">
<link href="css/icons.css" rel="stylesheet" type="text/css">
<link href="css/pages.css" rel="stylesheet" type="text/css">
<link href="css/responsive.css" rel="stylesheet" type="text/css">
<!--[if lt IE 9]><script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script><![endif]-->
<script src="js/modernizr.min.js"></script>
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','../www.google-analytics.com/analytics.js','ga');
ga('create', '0', 'auto');
ga('send', 'pageview');
</script>
</head>
<body class="fixed-left">
<div id="wrapper">
<div class="topbar">
<?php include_once dirname(__FILE__) . '/includes/topbarleft.php'; ?>
<div class="navbar navbar-default" role="navigation">
<div class="container">
<div class="">
<?php include_once dirname(__FILE__) . '/includes/topbarpullleft.php'; ?>
<?php include_once dirname(__FILE__) . '/includes/topbarright.php'; ?>
<div class="left side-menu">
<div class="sidebar-inner slimscrollleft">
<div class="user-details">
<div class="pull-left">
<img src="images/users/avatar-1.jpg" alt="" class="thumb-md img-circle">
</div>
<div class="user-info">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><?php echo $userRow['user_login_id']; ?></a>
<p class="text-muted m-0"><?php echo $userRow['user_role']; ?></p>
</div>
</div>
<div id="sidebar-menu">
<ul>
<?php include_once dirname(__FILE__) . '/includes/menu.php'; ?>
<?php
if($userRow['user_role']=="Manager" || $userRow['user_role']=="Team Leader")
{
?>
<?php include_once dirname(__FILE__) . '/includes/menureporting.php'; ?>
<?php
}
?>
<?php
if($userRow['user_admin']=="Yes")
{
?>
<?php include_once dirname(__FILE__) . '/includes/menuadmin.php'; ?>
<?php
}
?>
</ul>
<div class="clearfix">
</div>
<div class="clearfix">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="content-page">
<div class="content">
<div class="container">
<div class="row">
<div class="col-sm-12">
<h4 class="page-title">Create New Customer</h4>
<ol class="breadcrumb">
<li><a href="#">SystemTech</a></li>
<li><a href="#">Customers</a></li>
<li class="active">Create New Customer</li>
</ol>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="card-box">
<h4 class="m-t-0 header-title"><b>Creating new customer</b></h4>
<form id="wizard-validation-form" method="post" action="createcust.php">
<div>
<h3>Personal Detail</h3>
<section>
<div class="form-group clearfix">
<label class="col-lg-2 control-label" for="cust_first_name">First name</label>
<div class="col-lg-10">
<input class="required form-control" id="cust_first_name" name="cust_first_name" type="text">
</div>
</div>
<div class="form-group clearfix">
<label class="col-lg-2 control-label" for="cust_last_name">Last Name</label>
<div class="col-lg-10">
<input class="required form-control" id="cust_last_name" name="cust_last_name" type="text">
</div>
</div>
<div class="form-group clearfix">
<label class="col-lg-2 control-label" for="cust_email_id">Email ID</label>
<div class="col-lg-10">
<input type="email" class="required form-control" id="cust_email_id" placeholder="Email" name="cust_email_id">
</div>
</div>
</section>
<h3>Contact Detail</h3>
<section>
<div class="form-group clearfix">
<label class="col-lg-2 control-label" for="cust_contact_no">Contact Number</label>
<div class="col-lg-10">
<input type="text" placeholder="" data-mask="(999) 999-9999" class="required form-control" name="cust_contact_no"> <span class="font-13 text-muted">(999) 999-9999</span>
</div>
</div>
<div class="form-group clearfix">
<label class="col-lg-2 control-label" for="cust_alt_contact_no">Alt. Contact Number</label>
<div class="col-lg-10">
<input type="text" placeholder="" data-mask="(999) 999-9999" class="required form-control" name="cust_alt_contact_no"> <span class="font-13 text-muted">(999) 999-9999</span>
</div>
</div>
</section>
<h3>Billing Address</h3>
<section>
<div class="form-group clearfix">
<label class="col-lg-2 control-label" for="cust_bill_addr">Address</label>
<div class="col-lg-10">
<input id="cust_bill_addr" name="cust_bill_addr" type="text" class="form-control" value="Customer Address">
</div>
</div>
<div class="form-group clearfix">
<label class="col-lg-2 control-label" for="cust_country">Country</label>
<div class="col-lg-10">
<input id="cust_country" name="cust_country" type="text" class="required form-control">
</div>
</div>
<div class="form-group clearfix">
<label class="col-lg-2 control-label" for="cust_state">State</label>
<div class="col-lg-10">
<input id="cust_state" name="cust_state" type="text" class="required form-control">
</div>
</div>
<div class="form-group clearfix">
<label class="col-lg-2 control-label" for="cust_zip">ZIP Code</label>
<div class="col-lg-10">
<input id="cust_zip" name="cust_zip" type="text" class="required form-control">
</div>
</div>
</section>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>var resizefunc = [];</script>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/detect.js"></script>
<script src="js/fastclick.js"></script>
<script src="js/jquery.slimscroll.js"></script>
<script src="js/jquery.blockUI.js"></script>
<script src="js/waves.js"></script>
<script src="js/wow.min.js"></script>
<script src="js/jquery.nicescroll.js"></script>
<script src="js/jquery.scrollTo.min.js"></script>
<script src="js/jquery.core.js"></script>
<script src="js/jquery.app.js"></script>
<script src="plugins/bootstrapvalidator/dist/js/bootstrapValidator.js" type="text/javascript"></script>
<script src="plugins/jquery.steps/build/jquery.steps.min.js" type="text/javascript"></script>
<script type="text/javascript" src="plugins/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="pages/jquery.wizard-init.js" type="text/javascript"></script>
<script src="plugins/autoNumeric/autoNumeric.js" type="text/javascript"></script>
<script type="text/javascript">jQuery(function($) {
$('.autonumber').autoNumeric('init');
});
</script>
<script src="plugins/bootstrap-inputmask/bootstrap-inputmask.min.js" type="text/javascript"></script>
</body>
</html>
jquery:
! function(a) {
"use strict";
var b = function() {};
b.prototype.createBasic = function(a) {
return a.children("div").steps({
headerTag: "h3",
bodyTag: "section",
transitionEffect: "slideLeft"
}), a
}, b.prototype.createValidatorForm = function(a) {
return a.validate({
errorPlacement: function(a, b) {
b.after(a)
}
}), a.children("div").steps({
headerTag: "h3",
bodyTag: "section",
transitionEffect: "slideLeft",
onStepChanging: function(b, c, d) {
return a.validate().settings.ignore = ":disabled,:hidden", a.valid()
},
onFinishing: function(b, c) {
return a.validate().settings.ignore = ":disabled", a.valid()
},
onFinished: function(a, b) {
type:"POST"
alert("Submitted!")
}
}), a
}, b.prototype.createVertical = function(a) {
return a.steps({
headerTag: "h3",
bodyTag: "section",
transitionEffect: "fade",
stepsOrientation: "vertical"
}), a
}, b.prototype.init = function() {
this.createBasic(a("#basic-form")), this.createValidatorForm(a("#wizard-validation-form")), this.createVertical(a("#wizard-vertical"))
}, a.FormWizard = new b, a.FormWizard.Constructor = b
}(window.jQuery),
function(a) {
"use strict";
a.FormWizard.init()
}(window.jQuery);
840
You can serialize() form using it's ID, and send it via POST to a php file that will save them to the DB
$.ajax({
url: "save_to_db.php",
data: $("#form_to_send").serialize(),
type: "POST",
success: function (result) {
},
error: function (xhr, status, errorThrown) {
alert("Sorry, there was a problem!");
console.log("Error: " + errorThrown);
console.log("Status: " + status);
console.dir(xhr);
}
});
$field1 = $_POST['field1'] and so on...
162
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
