我需要在同一页面中使用不同的jquery选项卡创建两个表单
要求:
当我点击"Form1标签"时，我应该能够填写表单并成功提交数据，并显示"成功"消息，并且如果出现任何错误，错误应该显示在"Form1标签"中。
当我点击"Form2标签"时，我应该能够填写表单并成功提交数据，并显示"成功"消息，并且如果出现任何错误，错误应该显示在"Form2标签"中。
但是现在，对于Form1选项卡，它工作得很好，当涉及到Form2选项卡时，点击提交按钮会重定向到Form1选项卡。
<html>
<head>
<style>
#tabs { width:100%; height:30px; border-bottom:solid 1px #CCC; padding-right:2px; margin-top:10px; }
#tabs li { float:left; list-style:none; border-top:1px solid #ccc; border-left:1px solid #ccc; border-right:1px solid #ccc; margin-right:5px;
border-top-left-radius:3px; border-top-right-radius:3px; outline:none; }
#tabs li a { font-family:calibri; font-size:15px; color:#5685bc; padding-top:5px; padding-left:7px; padding-right:7px; padding-bottom:8px;
display:block; background: #FFF; border-top-left-radius:3px; border-top-right-radius:3px; text-decoration:none; outline:none; }
#tabs li a.inactive { padding-top:3px; padding-bottom:8px; padding-left:8px; padding-right:8px; color:#666666; background:#EEE; outline:none;
border-bottom:solid 1px #CCC; }
#tabs li a:hover, #tabs li a.inactive:hover { color:#5685bc; outline:none; }
.container2 { clear:both; width:99%; border:0px solid #CCC; padding-top:2px; margin:0 auto; }
.container2 h2 { margin-left:15px; margin-right:15px; margin-bottom:10px; color:#5685bc; }
.container2 p { margin-left:15px; margin-right:15px; margin-top:10px; margin-bottom:10px; line-height:1.3; font-size:small; }
.container2 ul { margin-left:25px; font-size:small; line-height:1.4; list-style-type:disc; }
.container2 li { padding-bottom:5px; margin-left:5px;}
</style>
<script src="js/jqueryv1.10.2.js"></script>
<script>
$ (document).ready(function()
{
$('#tabs li a:not(:first)').addClass('inactive');
$('.container2').hide();
$('.container2:first').show();
$('#tabs li a').click(function()
{
var t = $(this).attr('id');
if($(this).hasClass('inactive'))
{ //this is the start of our condition
$('#tabs li a').addClass('inactive');
$(this).removeClass('inactive');
$('.container2').hide();
$('#'+ t + 'C').fadeIn('slow');
}
});
});
</script>
</head>
<body>
<ul id="tabs">
<li><a id="tab1">FORM1</a></li>
<li><a id="tab2">FORM2 </a></li>
</ul>
<div class="container2" id="tab1C">
<?php
if (isset($_POST['create_form1']))
{
if (empty($_POST['username']) || empty($_POST['firstname'])) {
$errors[] = '<span class="error">All fields are required.</span>';
}
else {
if (isset($_POST['username']) && empty($_POST['username'])) { $errors[] = '<span class="error">Username is required</span>'; }
if (isset($_POST['firstname']) && empty($_POST['firstname'])) { $errors[] = '<span class="error">Firstname is required</span>'; }
}
if (empty($errors) === true) {
$username = $_POST['username'];
$firstname = $_POST['firstname'];
echo $username.'lavanya<br>';
echo $firstname.'<br>';
}
}
?>
<form method="post">
<table>
<tr><td><label>username</label><span style="color:#A60000">*</span></td>
<td><input type="text" name="username" size="30">
</td></tr>
<tr><td><label>firstname</label><span style="color:#A60000">*</span></td>
<td><input type="text" name="firstname" size="30" >
</td></tr>
<tr><td><input type="submit" value="submit" style="background:#8AC007;color:#080808;padding:6px;" name="create_form1"></td></tr>
</table>
</form>
<?php
if (empty($errors) === false)
echo '<div>' . implode('</p><p>', $errors) . '</div>';
?>
</div>
<div class="container2" id="tab2C">
<?php
if (isset($_POST['create_form2']))
{
$fullname = $_POST['fullname'];
$lastname = $_POST['lastname'];
if (empty($_POST['fullname']) || empty($_POST['lastname'])) {
$errors[] = '<span class="error">All fields are required.</span>';
}
else {
if (isset($_POST['fullname']) && empty($_POST['fullname'])) { $errors[] = '<span class="error">fullname is required</span>'; }
if (isset($_POST['lastname']) && empty($_POST['lastname'])) { $errors[] = '<span class="error">lastname is required</span>'; }
}
if (empty($errors) === true) {
echo $fullname.'<br>';
echo $lastname.'<br>';
}
}
?>
<form method="post">
<table>
<tr><td><label>fullname</label><span style="color:#A60000">*</span></td>
<td><input type="text" name="fullname" value="<?php if(isset($_POST["fullname"])) echo $fullname; ?>" size="30">
</td></tr>
<tr><td><label>lastname</label><span style="color:#A60000">*</span></td>
<td><input type="text" name="lastname" size="30" value="<?php if(isset($_POST["lastname"])) echo $lastname; ?>">
</td></tr>
<tr><td><input type="submit" value="submit" style="background:#8AC007;color:#080808;padding:6px;" name="create_form2"></td></tr>
</table>
</form>
</div>
</body>
</html>
难看的方法是检查POST变量并定义应该选择哪个选项卡。请看我在<script>标签中做的修改。它没有经过测试，但我希望你能明白。最好的方法是使用AJAX，但那是另一回事了。
<html>
<head>
<style>
#tabs { width:100%; height:30px; border-bottom:solid 1px #CCC; padding-right:2px; margin-top:10px; }
#tabs li { float:left; list-style:none; border-top:1px solid #ccc; border-left:1px solid #ccc; border-right:1px solid #ccc; margin-right:5px;
border-top-left-radius:3px; border-top-right-radius:3px; outline:none; }
#tabs li a { font-family:calibri; font-size:15px; color:#5685bc; padding-top:5px; padding-left:7px; padding-right:7px; padding-bottom:8px;
display:block; background: #FFF; border-top-left-radius:3px; border-top-right-radius:3px; text-decoration:none; outline:none; }
#tabs li a.inactive { padding-top:3px; padding-bottom:8px; padding-left:8px; padding-right:8px; color:#666666; background:#EEE; outline:none;
border-bottom:solid 1px #CCC; }
#tabs li a:hover, #tabs li a.inactive:hover { color:#5685bc; outline:none; }
.container2 { clear:both; width:99%; border:0px solid #CCC; padding-top:2px; margin:0 auto; }
.container2 h2 { margin-left:15px; margin-right:15px; margin-bottom:10px; color:#5685bc; }
.container2 p { margin-left:15px; margin-right:15px; margin-top:10px; margin-bottom:10px; line-height:1.3; font-size:small; }
.container2 ul { margin-left:25px; font-size:small; line-height:1.4; list-style-type:disc; }
.container2 li { padding-bottom:5px; margin-left:5px;}
</style>
<script src="js/jqueryv1.10.2.js"></script>
<script>
$ (document).ready(function()
{
<?php if (isset($_POST['create_form2'])): ?>
$('#tabs li a:first').addClass('inactive');
$('.container2').hide();
$('.container2:last').show();
<?php else: ?>
$('#tabs li a:not(:first)').addClass('inactive');
$('.container2').hide();
$('.container2:first').show();
<?php endif ?>
$('#tabs li a').click(function()
{
var t = $(this).attr('id');
if($(this).hasClass('inactive'))
{ //this is the start of our condition
$('#tabs li a').addClass('inactive');
$(this).removeClass('inactive');
$('.container2').hide();
$('#'+ t + 'C').fadeIn('slow');
}
});
});
</script>
</head>
<body>
<ul id="tabs">
<li><a id="tab1">FORM1</a></li>
<li><a id="tab2">FORM2 </a></li>
</ul>
<div class="container2" id="tab1C">
<?php
if (isset($_POST['create_form1']))
{
if (empty($_POST['username']) || empty($_POST['firstname'])) {
$errors[] = '<span class="error">All fields are required.</span>';
}
else {
if (isset($_POST['username']) && empty($_POST['username'])) { $errors[] = '<span class="error">Username is required</span>'; }
if (isset($_POST['firstname']) && empty($_POST['firstname'])) { $errors[] = '<span class="error">Firstname is required</span>'; }
}
if (empty($errors) === true) {
$username = $_POST['username'];
$firstname = $_POST['firstname'];
echo $username.'lavanya<br>';
echo $firstname.'<br>';
}
}
?>
<form method="post">
<table>
<tr><td><label>username</label><span style="color:#A60000">*</span></td>
<td><input type="text" name="username" size="30">
</td></tr>
<tr><td><label>firstname</label><span style="color:#A60000">*</span></td>
<td><input type="text" name="firstname" size="30" >
</td></tr>
<tr><td><input type="submit" value="submit" style="background:#8AC007;color:#080808;padding:6px;" name="create_form1"></td></tr>
</table>
</form>
<?php
if (empty($errors) === false)
echo '<div>' . implode('</p><p>', $errors) . '</div>';
?>
</div>
<div class="container2" id="tab2C">
<?php
if (isset($_POST['create_form2']))
{
$fullname = $_POST['fullname'];
$lastname = $_POST['lastname'];
if (empty($_POST['fullname']) || empty($_POST['lastname'])) {
$errors[] = '<span class="error">All fields are required.</span>';
}
else {
if (isset($_POST['fullname']) && empty($_POST['fullname'])) { $errors[] = '<span class="error">fullname is required</span>'; }
if (isset($_POST['lastname']) && empty($_POST['lastname'])) { $errors[] = '<span class="error">lastname is required</span>'; }
}
if (empty($errors) === true) {
echo $fullname.'<br>';
echo $lastname.'<br>';
}
}
?>
<form method="post">
<table>
<tr><td><label>fullname</label><span style="color:#A60000">*</span></td>
<td><input type="text" name="fullname" value="<?php if(isset($_POST["fullname"])) echo $fullname; ?>" size="30">
</td></tr>
<tr><td><label>lastname</label><span style="color:#A60000">*</span></td>
<td><input type="text" name="lastname" size="30" value="<?php if(isset($_POST["lastname"])) echo $lastname; ?>">
</td></tr>
<tr><td><input type="submit" value="submit" style="background:#8AC007;color:#080808;padding:6px;" name="create_form2"></td></tr>
</table>
</form>
</div>
</body>
</html>