How to display the content of a tab when a button is clicked
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.
Do you actually have the form submitting to the web server and re-sending you the page information, or is the submit button just running a javascript function and you remain on the same page?
If you're reloading the page content then when you click submit you need to send the server what tab you were on before so it can make an adjustment to change the default tab when it sends the new page. This might involve moving the "current" class to a different tab or putting display: none; on the original "starting tab" and display: block; on the new one.
There are two ways to do this. If you have one form per tab, you just need a <input type="hidden" name="tab" value="2" /> input in your form. This way when you submit the form along with the other values it reminds the server which tab you were on. This doesn't work if you have a single form that stretches over every tab, however. In that case you would be submitting every hidden input, and since they have the same name only the last one is usually sent.
If you have multiple forms then the solution would be to change the value or name of your <input type="submit" /> button. It's actually possible to check the value of this just like any other input, so on the server side (in PHP, in this example) you could do one of the following:
(changed name of input per tab):
if(isset($_POST["submit_tab2"]){
// They were on tab 2
}
(changed value):
if($_POST["submit"] == "Click here to submit tab 2!"){
// They were on tab 2
}
加载中,请稍侯......
精彩评论