javascript - 使用 Bootstrap PHP 表单向导插入到 sql-6ren

javascript - 使用 Bootstrap PHP 表单向导插入到 sql

转载作者：塔克拉玛干更新时间：2023-11-03 05:46:59

我正在尝试学习 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" 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>

j查询:

! 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);

最佳答案

您可以使用它的 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'] 等等...

关于javascript - 使用 Bootstrap PHP 表单向导插入到 sql，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33734440/

文章推荐： algorithm - O(V+E)空间复杂度是什么意思？

文章推荐： algorithm - 使用 GPS 计算距离 : How to consider accuracy differences

文章推荐： php - 用于 PHP 的 TeamSpeak API 更改的变量

WPF mvvm 向导
我正在实现 WPF MVVM 向导，我想知道执行 DoOperation 的正确方法当加载新的向导页面 (UserControl) 时。 DoOperation在 MyWizard.ViewModal
django 向导，在同一步骤中使用表单和表单集
我有一个场景，我正在尝试计划开始编码，并且我正在考虑使用django向导。我的计划是通过两个步骤构建一个 django 向导，第一个简单，但第二个有点复杂。第二步将包含一个表单，该表单将根据第一步选
flash - Flash或Flex是否更好地构建了用户交互式订购“向导”网站？
我想看看这些是否“建立了……” Flash网站（以支持用户定制的订购过程）是使用常规Flash还是Flex完成的？ Site 1 Site 2 Site 3 Site 4 所有这些都可以通过定制的订购
wizard - FuelUX 向导 - 允许直接选择流程中的后续步骤
我在人们提交一些数据的表单上使用了 FuelUX 向导，我们希望将其分解为逻辑步骤。效果非常好。现在我正在处理相同表单的编辑版本，它工作正常，但由于步骤已经加载了数据，我希望用户能够直接跳到步骤 X
Django ModelForm 向导 - 如何创建数据库对象？
我有一个足够大的模型，可以切割成 3 种形式。我想使用 FormWizzard 来做到这一点，但我想知道，如何将表单中的信息保存到数据库？所有东西都来自同一个模型。你知道如何做到这一点吗？最佳答
java - Primefaces 向导。如何返回onnext的js函数选项卡
我使用 Primefaces 3.5。并尝试在的onnext处理程序中调用js函数。我希望在当前选项卡验证结果后，onnext 返回特定选项卡上的选项卡。我的验证函数 function val
jquery - 向导 Bootstrap 返回当前选项卡
我在我的应用程序中实现了向导 Bootstrap 。我想检索当前选项卡的索引来测试显示或隐藏按钮“下一个”“上一个” $('#rootwizard').bootstrapWizard({ '
user-interface - 创建基于终端的安装程序/向导
我想创建一个基于终端的安装程序/向导。理想情况下，它就像 Ubuntu 服务器安装程序或 Arch Linux 安装程序——一个 ncurses (?) 重的 GUI，具有很多形式和箭头键优点。其
java - 添加滚动条到 JFACE 向导
问题我的 WizardPage 中有一个 Composite，如果该 Composite 比向导窗口大，我想向其中添加滚动条，但到目前为止我尝试过的方法都不起作用。有人知道如何添加滚动条吗？我想将
javascript - Bootstrap 向导/步骤表单
我正在尝试制作一个引导步骤表单，但它不想工作。我正在使用这段代码: https://codepen.io/digitalavinash/pen/VjyAXx?fbclid=IwAR2j8hRIG0gn
javascript - 根据所做的选择导致特定页面的 slider /向导
我目前正在开发一个网站(与健身相关)，客户想要做一个功能，允许用户根据您从类似于 this example 上的 slider 中选择的选项来选择锻炼计划。 . 我想知道这是否可以用 CSS 完成，或
ios - 在一个场景中创建 iOS 向导
关闭。这个问题是opinion-based .它目前不接受答案。想要改进这个问题？更新问题，以便 editing this post 可以用事实和引用来回答它. 关闭 6 年前。 Improve
html - 向导 H1 标签中的中心文本
这应该很简单，但我错过了。我试图通过在我的 stylesheet.css 中使用此 css 将文本居中放置在我的向导 h1 标签中 .h1textalign { text-align:center;
jquery - Bootstrap 3 向导？
我已经在这里问过这个问题 Creating next and back button on tabs bootstrap 3 wizard? 但我现在已经扩展它以在最后一个选项卡上添加完成，但现在我在
摩尔庄园手游传送好友，蘑菇、向导？摩尔庄园手游传送方法攻略
摩尔庄园手游已经上线好几天了，身边不少小伙伴也都开始玩了，不过其中的还是有不少的玩法等待大家去解锁，比如大家知道怎么去传送好友，蘑菇吗?向导怎么传送呢?有哪些方法和技巧?下面就和小编一起来看看。
fragment 和其他模板的 Android Studio 向导
每次我在我的 Android Studio 中为该项目创建一个新 fragment 时，它都会创建 android.support.v4.app.Fragment ，这不是我想要的。此外，它总是会触发
javascript - SAPUI5:向导 goToStep() 方法不起作用
我正在为我的公司项目使用 SAPUI5 向导，但由于某种原因它对我不起作用。这是我的代码: var allSteps = oWizardElement.getSteps(); var stepOne
typo3 - 如何在扩展中使用 TYPO3 Link 向导
在扩展中，我希望能够修改现有链接。数据库中的相应字段可能包含多个链接(例如 tt_content.bodytext)。我想尽可能多地重用现有的功能。所以我想使用已经存在的链接向导。我找到的是现有路
Python 脚本错误 - Kodi/XBMC 向导
长话短说，我有一个开发人员让我成为一名向导，即使我付了钱给他，他也没有在没有回复的情况下离开，并坚持使用一个半工作的Python向导。该向导在 Kodi 内部运行，下载并解压 zip 文件。但有时我
javascript - FuelUX 向导 ajax 验证
我对 Fuel UX 向导有疑问。当我按下 fuel ux 向导上的下一步按钮时，我发送使用 validate_step(step) 选择的 category_id 并使用来自 php 的 json

塔克拉玛干

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 使用 Bootstrap PHP 表单向导插入到 sql