title: Use Bootstrap PHP Form wizard insert into sql
body: <p>I am trying to learn PHP and came across Bootstrap Form wizard and wanted to give it a try.</p>
  
  <p>I have made a basic registration form which should basically INSERT the values from the form to the database.</p>
  
  <p>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.</p>
  
  <p>PHP Code: </p>
  
  <pre><code>&lt;?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);    
  ?&gt;
  
  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
        &lt;meta charset="utf-8"&gt;
        &lt;meta name="viewport" content="width=device-width,initial-scale=1"&gt;
        &lt;meta name="description" content="A fully featured admin theme which can be used to build CRM, CMS, etc."&gt;
        &lt;meta name="author" content="Coderthemes"&gt;
        &lt;link rel="shortcut icon" href="images/favicon_1.ico"&gt;
        &lt;title&gt;Create New Customer&lt;/title&gt;
        &lt;link rel="stylesheet" type="text/css" href="plugins/jquery.steps/demo/css/jquery.steps.css"&gt;
        &lt;link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"&gt;
        &lt;link href="css/core.css" rel="stylesheet" type="text/css"&gt;
        &lt;link href="css/components.css" rel="stylesheet" type="text/css"&gt;
        &lt;link href="css/icons.css" rel="stylesheet" type="text/css"&gt;
        &lt;link href="css/pages.css" rel="stylesheet" type="text/css"&gt;
        &lt;link href="css/responsive.css" rel="stylesheet" type="text/css"&gt;
        &lt;!--[if lt IE 9]&gt;&lt;script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"&gt;&lt;/script&gt;
        &lt;script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"&gt;&lt;/script&gt;&lt;![endif]--&gt;
        &lt;script src="js/modernizr.min.js"&gt;&lt;/script&gt;
        &lt;script&gt;(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');
        &lt;/script&gt;
  
  &lt;/head&gt;
      &lt;body class="fixed-left"&gt;
  
      &lt;div id="wrapper"&gt;
          &lt;div class="topbar"&gt;
              &lt;?php include_once dirname(__FILE__) . '/includes/topbarleft.php'; ?&gt;
                  &lt;div class="navbar navbar-default" role="navigation"&gt;
                      &lt;div class="container"&gt;
                          &lt;div class=""&gt;
                              &lt;?php include_once dirname(__FILE__) . '/includes/topbarpullleft.php'; ?&gt;
                              &lt;?php include_once dirname(__FILE__) . '/includes/topbarright.php'; ?&gt;
                                  &lt;div class="left side-menu"&gt;
                                      &lt;div class="sidebar-inner slimscrollleft"&gt;
                                          &lt;div class="user-details"&gt;
                                              &lt;div class="pull-left"&gt;
                                                  &lt;img src="images/users/avatar-1.jpg" alt="" class="thumb-md img-circle"&gt;
                                              &lt;/div&gt;
                                              &lt;div class="user-info"&gt;
                                              &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"&gt;&lt;?php echo $userRow['user_login_id']; ?&gt;&lt;/a&gt;
                                              &lt;p class="text-muted m-0"&gt;&lt;?php echo $userRow['user_role']; ?&gt;&lt;/p&gt;
                                              &lt;/div&gt;
                                          &lt;/div&gt;
                                          &lt;div id="sidebar-menu"&gt;
                                              &lt;ul&gt;
                                                  &lt;?php include_once dirname(__FILE__) . '/includes/menu.php'; ?&gt;
                                                  &lt;?php
                                                      if($userRow['user_role']=="Manager" || $userRow['user_role']=="Team Leader")
                                                          {
                                                  ?&gt;
                                                  &lt;?php include_once dirname(__FILE__) . '/includes/menureporting.php'; ?&gt;
                                                  &lt;?php
                                                          }
                                                  ?&gt;
                                                  &lt;?php
                                                      if($userRow['user_admin']=="Yes")
                                                          {
                                                  ?&gt;
                                                  &lt;?php include_once dirname(__FILE__) . '/includes/menuadmin.php'; ?&gt;
                                                  &lt;?php
                                                          }
                                                  ?&gt;
                                              &lt;/ul&gt;
                                              &lt;div class="clearfix"&gt;
                                              &lt;/div&gt;
                                              &lt;div class="clearfix"&gt;
                                              &lt;/div&gt;
                                          &lt;/div&gt;
                                      &lt;/div&gt;  
                                  &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="content-page"&gt;
              &lt;div class="content"&gt;
                  &lt;div class="container"&gt;
                      &lt;div class="row"&gt;
                          &lt;div class="col-sm-12"&gt;
                              &lt;h4 class="page-title"&gt;Create New Customer&lt;/h4&gt;
                                  &lt;ol class="breadcrumb"&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;SystemTech&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;Customers&lt;/a&gt;&lt;/li&gt;
                                      &lt;li class="active"&gt;Create New Customer&lt;/li&gt;
                                  &lt;/ol&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="row"&gt;
                          &lt;div class="col-sm-12"&gt;
                              &lt;div class="card-box"&gt;
                                  &lt;h4 class="m-t-0 header-title"&gt;&lt;b&gt;Creating new customer&lt;/b&gt;&lt;/h4&gt;
                                      &lt;form id="wizard-validation-form" method="post" action="createcust.php"&gt;
                                          &lt;div&gt;
                                              &lt;h3&gt;Personal Detail&lt;/h3&gt;
                                                  &lt;section&gt;
                                                      &lt;div class="form-group clearfix"&gt;
                                                          &lt;label class="col-lg-2 control-label" for="cust_first_name"&gt;First name&lt;/label&gt;
                                                              &lt;div class="col-lg-10"&gt;
                                                              &lt;input class="required form-control" id="cust_first_name" name="cust_first_name" type="text"&gt;
                                                              &lt;/div&gt;
                                                      &lt;/div&gt;
                                                      &lt;div class="form-group clearfix"&gt;
                                                          &lt;label class="col-lg-2 control-label" for="cust_last_name"&gt;Last Name&lt;/label&gt;
                                                              &lt;div class="col-lg-10"&gt;
                                                              &lt;input class="required form-control" id="cust_last_name" name="cust_last_name" type="text"&gt;
                                                              &lt;/div&gt;
                                                      &lt;/div&gt;
                                                      &lt;div class="form-group clearfix"&gt;
                                                          &lt;label class="col-lg-2 control-label" for="cust_email_id"&gt;Email ID&lt;/label&gt;
                                                              &lt;div class="col-lg-10"&gt;
                                                              &lt;input type="email" class="required form-control" id="cust_email_id" placeholder="Email" name="cust_email_id"&gt;
                                                              &lt;/div&gt;
                                                      &lt;/div&gt;  
                                                  &lt;/section&gt;
                                              &lt;h3&gt;Contact Detail&lt;/h3&gt;
                                                  &lt;section&gt;
                                                      &lt;div class="form-group clearfix"&gt;
                                                          &lt;label class="col-lg-2 control-label" for="cust_contact_no"&gt;Contact Number&lt;/label&gt;
                                                              &lt;div class="col-lg-10"&gt;
                                                              &lt;input type="text" placeholder="" data-mask="(999) 999-9999" class="required form-control" name="cust_contact_no"&gt; &lt;span class="font-13 text-muted"&gt;(999) 999-9999&lt;/span&gt;
                                                              &lt;/div&gt;
                                                      &lt;/div&gt;
                                                      &lt;div class="form-group clearfix"&gt;
                                                          &lt;label class="col-lg-2 control-label" for="cust_alt_contact_no"&gt;Alt. Contact Number&lt;/label&gt;
                                                              &lt;div class="col-lg-10"&gt;
                                                              &lt;input type="text" placeholder="" data-mask="(999) 999-9999" class="required form-control" name="cust_alt_contact_no"&gt; &lt;span class="font-13 text-muted"&gt;(999) 999-9999&lt;/span&gt;
                                                              &lt;/div&gt;
                                                      &lt;/div&gt;
                                                  &lt;/section&gt;
                                                  &lt;h3&gt;Billing Address&lt;/h3&gt;
                                                  &lt;section&gt;
                                                      &lt;div class="form-group clearfix"&gt;
                                                          &lt;label class="col-lg-2 control-label" for="cust_bill_addr"&gt;Address&lt;/label&gt;
                                                              &lt;div class="col-lg-10"&gt;
                                                              &lt;input id="cust_bill_addr" name="cust_bill_addr" type="text" class="form-control" value="Customer Address"&gt;
                                                              &lt;/div&gt;
                                                      &lt;/div&gt;
                                                      &lt;div class="form-group clearfix"&gt;
                                                          &lt;label class="col-lg-2 control-label" for="cust_country"&gt;Country&lt;/label&gt;
                                                              &lt;div class="col-lg-10"&gt;
                                                              &lt;input id="cust_country" name="cust_country" type="text" class="required form-control"&gt;
                                                              &lt;/div&gt;
                                                      &lt;/div&gt;
                                                      &lt;div class="form-group clearfix"&gt;
                                                          &lt;label class="col-lg-2 control-label" for="cust_state"&gt;State&lt;/label&gt;
                                                              &lt;div class="col-lg-10"&gt;
                                                              &lt;input id="cust_state" name="cust_state" type="text" class="required form-control"&gt;
                                                              &lt;/div&gt;
                                                      &lt;/div&gt;
                                                      &lt;div class="form-group clearfix"&gt;
                                                          &lt;label class="col-lg-2 control-label" for="cust_zip"&gt;ZIP Code&lt;/label&gt;
                                                              &lt;div class="col-lg-10"&gt;
                                                              &lt;input id="cust_zip" name="cust_zip" type="text" class="required form-control"&gt;
                                                              &lt;/div&gt;
                                                      &lt;/div&gt;
                                                  &lt;/section&gt;
                                          &lt;/div&gt;
                                      &lt;/form&gt;
  
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
          &lt;script&gt;var resizefunc = [];&lt;/script&gt;
        &lt;script src="js/jquery.min.js"&gt;&lt;/script&gt;
        &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;
        &lt;script src="js/detect.js"&gt;&lt;/script&gt;
        &lt;script src="js/fastclick.js"&gt;&lt;/script&gt;
        &lt;script src="js/jquery.slimscroll.js"&gt;&lt;/script&gt;
        &lt;script src="js/jquery.blockUI.js"&gt;&lt;/script&gt;
        &lt;script src="js/waves.js"&gt;&lt;/script&gt;
        &lt;script src="js/wow.min.js"&gt;&lt;/script&gt;
        &lt;script src="js/jquery.nicescroll.js"&gt;&lt;/script&gt;
        &lt;script src="js/jquery.scrollTo.min.js"&gt;&lt;/script&gt;
        &lt;script src="js/jquery.core.js"&gt;&lt;/script&gt;
        &lt;script src="js/jquery.app.js"&gt;&lt;/script&gt;
        &lt;script src="plugins/bootstrapvalidator/dist/js/bootstrapValidator.js" type="text/javascript"&gt;&lt;/script&gt;
        &lt;script src="plugins/jquery.steps/build/jquery.steps.min.js" type="text/javascript"&gt;&lt;/script&gt;
        &lt;script type="text/javascript" src="plugins/jquery-validation/dist/jquery.validate.min.js"&gt;&lt;/script&gt;
        &lt;script src="pages/jquery.wizard-init.js" type="text/javascript"&gt;&lt;/script&gt;
        &lt;script src="plugins/autoNumeric/autoNumeric.js" type="text/javascript"&gt;&lt;/script&gt;
        &lt;script type="text/javascript"&gt;jQuery(function($) {
           $('.autonumber').autoNumeric('init');    
           });
        &lt;/script&gt;
        &lt;script src="plugins/bootstrap-inputmask/bootstrap-inputmask.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p>jquery:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>! 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);</code></pre>
  </div>
  </div>
  </p>