How to switch tabs in button click after saving data in mysql database in php?

nageshk88 · October 7, 2013

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>

<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>

<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>

<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?

lilmer · October 8, 2013

You need to use ajax on that. Kindly use Jquery ajax

$('button#tab2').click(function(){
   
   var process = $.ajax({
    //YOUR DATA TO BE SAVE
    AND TO PROCESS
   });
   
   process..done(function() {
    $('div#tab1').hide();
    $('dov#tab2').show();
  });
});

Sign In

How to switch tabs in button click after saving data in mysql database in php?

Recommended Posts

nageshk88

Link to comment

Share on other sites

lilmer

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information