如何在 php 中将数据保存在 mysql 数据库中后在按钮单击中切换选项卡 - How to switch tabs in button click after saving data in mysql database in php?

我是PHP的新手，我开始使用php开发应用程序，请查看我的代码

索引.php

<?php require_once('./config.php'); ?>
<?php
/*
* Following code will get single product details
* A product is identified by product id (pid)
*/
// array for JSON response
$response = array();
// check for required fields
if (isset($_POST['name'])) {
$title = $_POST['name'];
$company = $_POST['company'];
require_once('./db_connect.php');
// connecting to db
$db = new DB_CONNECT();
// mysql inserting a new row
$result = mysql_query("INSERT INTO user(name,company) VALUES('$title','$company')");
}    
?>
<html>
<head>
<link type="text/css" rel="Stylesheet" href="style.css" />
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
    $(window).load(function () {
        var tabContents = $(".tab_content").hide(),
        tabs = $("ul.tabs li");
        tabs.first().addClass("active").show();
        tabContents.first().show();
        tabs.click(function() {
        var $this = $(this), 
        activeTab = $this.find('a').attr('href');
        if(!$this.hasClass('active')){
        $this.addClass('active').siblings().removeClass('active');
        tabContents.hide().filter(activeTab).fadeIn();
        }
        return false;
        });
        $(".tabbutton").click(function () {
            var nextTab = parseInt($("li.active").attr("id"), 10) + 1;
            if (nextTab === 4) { nextTab = 1; }
            tabs.removeClass("active");
             $("#" + nextTab).addClass("active");
             tabContents.hide();
             $("#tab" + nextTab).fadeIn("slow");                
        });
    });
</script>
<script type="text/javascript" src="https://js.stripe.com/v1/"></script>
<!-- jQuery is used only for this example; it isn't required to use Stripe -->
<script type="text/javascript"  src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
// this identifies your website in the createToken call below
Stripe.setPublishableKey("<?php echo $stripe['publishable_key']; ?>");
function stripeResponseHandler(status, response) {
    if (response.error) {
        // re-enable the submit button
        $('.submit-button').removeAttr("disabled");
        // show the errors on the form
        $(".payment-errors").html(response.error.message);
    } else {
        var form$ = $("#payment-form");
        // token contains id, last4, and card type
        var token = response['id'];
        // insert the token into the form so it gets submitted to the server
        form$.append("<input type='hidden' name='stripeToken' value='" + token + "' />");
                // and submit
        form$.get(0).submit();
    }
}
$(document).ready(function() {
    $("#payment-form").submit(function(event) {
        // disable the submit button to prevent repeated clicks
        $('.submit-button').attr("disabled", "disabled");
        // createToken returns immediately - the supplied callback submits the form if there are  no errors
        Stripe.createToken({
            number: $('.card-number').val(),
            cvc: $('.card-cvc').val(),
            exp_month: $('.card-expiry-month').val(),
            exp_year: $('.card-expiry-year').val()
        }, stripeResponseHandler);
        return false; // submit from callback
    });
});

身体部位

<ul class="tabs clearfix">
    <li id="1"><a href="#tab1">Tab1</a></li>
    <li id="2"><a href="#tab2">Tab2</a></li>
    <li id="3"><a href="#tab3">Tab3</a></li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content">
        <form method="post">
            <p>
                    <label>Name:</label> <input type="text" name="name">
            </p>
            <p>
                    <label>Company:</label> <input type="text" name="company">
            </p>
           <input type="submit" value="SAVE" class="tabbutton"/>
    </form>
    </div>
<div id="tab2" class="tab_content"> 
     <form id="payment-form" action="charge.php" method="post">
<h3>Purchase a quote by Oscar Wilde today! Only $535! Limited supply and going fast, buy now!!</h3>
<!-- to display errors returned by createToken -->
<span class="payment-errors"></span>
<form action="charge.php" method="POST" id="payment-form">
    <div class="form-row">
        <label>Card Number</label>
            <input type="text" size="20" autocomplete="off" class="card-number" />
    </div>
    <div class="form-row">
        <label>CVC</label>
        <input type="text" size="4" autocomplete="off" class="card-cvc" />
    </div>
    <div class="form-row">
        <label>Expiration (MM/YYYY)</label>
        <input type="text" size="2" class="card-expiry-month"/>
        <span> / </span>
        <input type="text" size="4" class="card-expiry-year"/>
    </div>
    <button type="submit" class="submit-button">Buy!</button>
</form>
</form>
</div>

<div id="tab1" class="tab_content">
<p>Tab 3 Content Goes Here...</p>
</div>
</div>
</body>
</html>

在 Tab1 中，我正在将数据保存到数据库中。每当用户单击保存按钮时，都需要将数据保存到数据库中，它将转到Tab2。我在保存数据时很成功。我的问题是保存数据后它不会进入 Tab2。当我们单击保存按钮时，tab2 只是闪烁，但页面仍然显示 tab1 内容。我希望每当用户单击保存按钮时，数据都需要保存在数据库中，并且它将转到 Tab2 内容。有什么建议吗？

尝试这种方法，将解决您的问题：

<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function() {
    $(".tab_content").hide();
    tabs = $("ul.tabs li");
    tabs.first().addClass("active").show();
    $(".tab_content").first().show();
    tabs.click(function() {
        var $this = $(this), activeTab = $this.find('a').attr('href');
        if (!$this.hasClass('active')) {
            $this.addClass('active').siblings().removeClass('active');
            $(".tab_content").hide().filter(activeTab).fadeIn();
        }
        return false;
    });
    $("#tabbutton").click(function() {
        $("#2").addClass('active').siblings().removeClass('active');
        $(".tab_content").hide();
        $("#tab2").fadeIn();
    });
});
</script>
</head>
<body>
    <ul class="tabs clearfix">
        <li id="1"><a href="#tab1">Tab1</a></li>
        <li id="2"><a href="#tab2">Tab2</a></li>
        <li id="3"><a href="#tab3">Tab3</a></li>
    </ul>
    <div class="tab_container">
        <div id="tab1" class="tab_content">
            <p>Tab 1 Content Goes Here...</p>
            <input type="button" id="tabbutton"/>
        </div>
        <div id="tab2" class="tab_content">
            <p>Tab 2 Content Goes Here...</p>
        </div>
        <div id="tab3" class="tab_content">
            <p>Tab 3 Content Goes Here...</p>
        </div>
    </div>
</body>
</html>

此外，您的代码中也有几个问题。

首先，您在 tab2 div 中添加了两次表单标签。删除一个。

<div id="tab2" class="tab_content"> 
     <form id="payment-form" action="charge.php" method="post">
<h3>Purchase a quote by Oscar Wilde today! Only $535! Limited supply and going fast, buy now!!</h3>
<!-- to display errors returned by createToken -->
<span class="payment-errors"></span>
<form action="charge.php" method="POST" id="payment-form">
    <div class="form-row">
        <label>Card Number</label>
            <input type="text" size="20" autocomplete="off" class="card-number" />
    </div>
    <div class="form-row">
        <label>CVC</label>
        <input type="text" size="4" autocomplete="off" class="card-cvc" />
    </div>
    <div class="form-row">
        <label>Expiration (MM/YYYY)</label>
        <input type="text" size="2" class="card-expiry-month"/>
        <span> / </span>
        <input type="text" size="4" class="card-expiry-year"/>
    </div>
    <button type="submit" class="submit-button">Buy!</button>
</form>
</form>
</div>

其次，您的 Tab3 div与 Tab1 具有相同的 ID。我认为这是导致问题的原因。将其更改为 Tab3 并尝试。

<div id="tab1" class="tab_content">
<p>Tab 3 Content Goes Here...</p>
</div>