How to display the content of a tab when a button is clicked in the content

Discussion in 'JavaScript' started by simon2x1, Nov 1, 2010.

0
  1. #1
    I have a page, home.php. On the page, I have CSS tabs tab1 and tab2. The tabs are on the same page not different pages. I want the content of tab2 to display whenever I click the submit button in the content of tab2, not take me back to tab1. How can I use JavaScript to implement this behavior?

    
<html>
<head>
<title>home</title>
</head>
<link href="SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
<body>
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">Tab1</li>
<li class="TabbedPanelsTab" tabindex="0">Tab2</li>
</ul>

<div class="TabbedPanelsContentGroup">

<div class="TabbedPanelsContent">
//this is where the content of the tab1 will be and i have another form in this content too

</div>

<div class="TabbedPanelsContent">
//this is where the content of the tab2 will be
<form action="home.php" method="post">
<?php
if (isset($_POST['submit'])) {
if(empty($_POST['boded']){
echo"Please do it again.";
}else{
 $mgs = ($_POST['boded']);
 //then insert to my database   
}
?>
<textarea id="message" name="boded" rows="5" cols="40"></textarea>
<input type="submit" name="submit" value="Submit" />
//if i click this button(submit) in this content it should display tab2 content not tab1
</form>
</div>

</div>
</body>
</html>
    Code (markup):

     
    simon2x1, Nov 1, 2010 IP