I am trying to learn PHP and came across the Bootstrap Form wizard and wanted to try it.
I made a basic registration form, which should basically INSERT the values from the form into the database.
With a normal form, I successfully registered using the submit form button. But with this wizard, I don’t have a submit button, with a little research, I found that this type of form is processed using jquery and so on. I needed to understand how I can use these forms to insert data into my database using 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"> <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="mt-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);
source share