2015-11-16 5 views
5

Ich versuche, PHP zu lernen und stieß auf Bootstrap Form Wizard und wollte es versuchen.Verwenden Sie Bootstrap PHP Form Wizard in SQL einfügen

Ich habe ein einfaches Registrierungsformular erstellt, das die Werte aus dem Formular INSERT INSERTIEREN sollte.

Mit normalem Formular habe ich erfolgreich mit Formular senden Schaltfläche registriert. Aber mit diesem Assistenten habe ich keine Submit-Taste, mit wenigen Untersuchungen fand ich, dass diese Art von Formular mit jquery und so weiter behandelt wird. Ich musste verstehen, wie ich diese Formulare verwenden kann, um Daten mit POST in meine Datenbank einzufügen.

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) { 
 
\t \t \t \t 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);

+1

alter mysql sintax, SQL-Injections, viel mehr bekam ich w3school – madalinivascu

+0

wahren sugest zu lernen .. Ich dachte, dass ich gehen würde, mit den Grundlagen Dinge zu verstehen und dann neue Möglichkeiten erkunden. –

+0

madalin können Sie bitte vorschlagen, wie kann ich dieses Formular in MySQL einreichen, so dass ich einen Start hier bin ich bin irgendwie fest und Suche nach Optionen zu verstehen. –

Antwort

1

Sie können serialize() Formular es ID ist, und es per Post an eine PHP-Datei senden, die sie retten an die 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'] und so weiter ...