I am new to PHP, i started developing application using php, please look into my code
index.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
});
});
Body part
<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>
In Tab1 I'm saving data into database. Whenever user clicks on the save button the data needs to be saved into database and it will go to Tab2. I am successful while saving the data. My problem is it is not going to Tab2 after saving the data. When we click on the save button, the tab2 is just blinking but the page is still showing tab1 content. I want that whenever the user clicks on the save button the data needs to be saved in database and it will go to Tab2 content. Any suggestions?