2015-11-16 10 views
5

Próbuję nauczyć się PHP i natknąłem się na kreator Form Bootstrap i chciałem spróbować.Użyj Bootstrap PHP Form Wizard wstaw do sql

Zrobiłem podstawowy formularz rejestracyjny, który powinien zasadniczo WSTAWIĆ wartości z formularza do bazy danych.

Przy użyciu formularza normalnego pomyślnie zarejestrowałem się przy użyciu przycisku przesyłania formularza. Ale z tym kreatorem nie mam przycisku przesyłania, z kilkoma badaniami odkryłem, że ten typ formularza jest obsługiwany przez jquery i tak dalej. Musiałem zrozumieć, w jaki sposób mogę użyć tych formularzy do wstawienia danych do mojej bazy danych za pomocą testu POST.

Kod PHP:

<?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

stary sintax MySQL, SQL injection, mam dużo więcej do nauczenia i sugest w3school – madalinivascu

+0

Prawdziwego .. Myślałam, że pójdzie z podstawy zrozumieć rzeczy, a następnie odkrywać nowe możliwości. –

+0

madalin, czy możesz zasugerować, jak mogę zrobić ten formularz składać w MySQL, więc mam zacząć tutaj jestem trochę utknąć i szukając opcji do zrozumienia. –

Odpowiedz

1

Można serialize() forma używając jego ID, i wysłać go pocztą na pliku php, które będą je zapisać do 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'] i tak dalej ...