如何在 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>
相关文章:
- 单击按钮以等待单击按钮
- 单击按钮后如何逐个调用分区,上一个分区将隐藏
- 当值更改时,在servlet中自动获取textarea值,无需单击按钮
- 单击按钮时循环浏览匹配的表
- 单击按钮后启动javascript提示
- 单击按钮时在灯箱中显示不同的内容
- 单击按钮时加载数据
- 如何在不需要单击按钮的情况下获取选项的值
- 单击按钮时显示随机字符串
- 在单击按钮前后禁用提交按钮
- 单击按钮即可在浏览器的新选项卡中打开 Sapui5 详细信息页面
- 单击按钮时Div Increment
- 若单击按钮,则更改Javascript中的变量
- 单击按钮更改加载到表中的JSON文件
- 如何在单击按钮时显示2行1列的表格
- 单击按钮前运行事件
- 如何删除父表行时;删除“;在React JS中单击按钮
- 如何创建一个表并在单击按钮时插入此标签和文本字段
- JavaScript-onClick将按钮ID或单击按钮的文本传递给函数
- 如何在单击按钮时显示一个分区,同时隐藏另一个分区