使用 Bootstrap PHP 表单向导插入 sql
Posted
技术标签:
【中文标题】使用 Bootstrap PHP 表单向导插入 sql【英文标题】：Use Bootstrap PHP Form wizard insert into sql 【发布时间】：2016-02-17 11:54:12 【问题描述】：我正在尝试学习 php，遇到了 Bootstrap Form 向导，想尝试一下。
我已经制作了一个基本的注册表单，基本上应该将表单中的值插入到数据库中。
使用普通表单，我已使用表单提交按钮成功注册。但是使用这个向导我没有提交按钮，几乎没有研究我发现这种类型的表单是用 jquery 等处理的。我需要了解如何继续使用这些表单通过 POST 将数据插入到我的数据库中。
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" 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);【问题讨论】：
旧的 mysql sintax，sql 注入，还有很多东西要学，我建议 w3school 是的。我想我会先了解基础知识，然后再探索新的选择。 madalin 你能建议我如何让这个表单在 MySQL 中提交，所以我从这里开始我有点卡住并寻找可以理解的选项。 了解表单和输入类型提交参见 w3school 我可以使用提交按钮，当它在那里时，我可以成功插入。但是对于这种没有提交按钮并且从此引导程序调用完成按钮的表单，我想了解如何插入表单数据。 【参考方案1】：您可以使用它的 ID serialize() 表单，然后通过 POST 将其发送到一个 php 文件，该文件将它们保存到数据库中
$.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']等等……
【讨论】：
以上是关于使用 Bootstrap PHP 表单向导插入 sql的主要内容，如果未能解决你的问题，请参考以下文章
Bootstrap HTML + MySQL PHP 表单安全性
如何通过 PHP 将未知数量的 HTML 表单字段插入 MySQL？