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>
I have tried what the first person asked me to do; it works, but there was a problem: the submit button did not send to the $_POST['submit'] whether it because of the false in my button (<input type="submit" name="submit" value="Submit" onClick="show_content('div_2'); return false;"/>) I fall I mention that in tab2 content I have a PHP code that receives the button send to it.
Above is my re-edited code, I will appreciate it if you edit on make code.