Untitled

<html>
<head>
<title>home</title></pre>
<!-- include jquery library file-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.3/themes/base/jquery-ui.css"  />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.8.3/jquery-ui.js"></script>

<!-- The ajax/jquery stuff -->
<script type="text/javascript">
    var currentTab = 0;
    $(function () {
        $("#tabs").tabs({
            select: function (e, i) {
                currentTab = i.index;
            }
        });
    });
    var tabs = $('#tabs').tabs();
    var c = $('#tabs').tabs("length");
    currentTab = currentTab == (c - 1) ? currentTab : (currentTab + 1);
    tabs.tabs('select', currentTab);
    $("#btnPrevious").show();
    if (currentTab == (c - 1)) {
        $("#btnNext").hide();
    } else {
        $("#btnNext").show();
    }
    $(document).ready(function() {
        $("#btnNext").click(function() {
        //Get values of the input fields and store it into the variables.
        var ID=$("#ID").val();
        var Name=$("#Name").val();
        var Email=$("#Email").val();

        //use the $.post() method to call insert.php file.. this is the ajax request
        $.post('insert.php', {ID: ID, Name: Name, Email: Email},
        function(data) {
             $("#message").html(data);
             $("#message").hide();
             $("#message").fadeIn(1500); //Fade in the data given by the insert.php file
        });
        return false;
        });
    });
</script>
</head>
<body>
<div id="tabs">
<ul>
    <li><a href="#tabs-1">Tab 1</a></li>
    <li><a href="#tabs-2">Tab 2</a></li>
    <li><a href="#tabs-3">Tab 3</a></li>
    <li><a href="#tabs-4">Tab 4</a></li>
    <li><a href="#tabs-5">Tab 5</a></li>
</ul>
<div id="tabs-1">
    <label>ID: </label> <input id="ID" type="text" />
    <label>Name: </label> <input id="Name" type="text" />
    <label>E-Mail: </label> <input id="Email" type="text" />
    <button id="btnNext" title="Insert Data">Push into mysql</button>
    <!-- For displaying a message -->
</div>
<div id="tabs-2">
<div id="message"></div>

<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" id="btnNext" class="submit-button">Donate!</button>
</form>

</div>
<div id="tabs-3">
    Tab 3 Content
</div>
 <div id="tabs-4">
    Tab 4 Content
</div>
 <div id="tabs-5">
    Tab 5 Content
</div>
</div>