使用选项卡功能运行PHP表单
我需要在同一页面中使用不同的jquery选项卡创建两个表单 要求: 当我点击“Form1 tab”时,我应该能够填写表单并成功提交数据,并显示消息“success”,如果出现任何错误,错误应该显示在“Form1 tab”中 当我点击“Form2 tab”时,我应该能够填写表单并成功提交数据,并显示消息“success”,如果出现任何错误,错误应该显示在“Form2 tab”中 但现在,对于Form1选项卡,它工作得很好,当谈到Form2选项卡时,单击submit按钮,它会重定向到Form1选项卡使用选项卡功能运行PHP表单,php,Php,我需要在同一页面中使用不同的jquery选项卡创建两个表单 要求: 当我点击“Form1 tab”时,我应该能够填写表单并成功提交数据,并显示消息“success”,如果出现任何错误,错误应该显示在“Form1 tab”中 当我点击“Form2 tab”时,我应该能够填写表单并成功提交数据,并显示消息“success”,如果出现任何错误,错误应该显示在“Form2 tab”中 但现在,对于Form1选项卡,它工作得很好,当谈到Form2选项卡时,单击submit按钮,它会重定向到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>
#制表符{宽度:100%;高度:30px;边框底部:实心1px#CCC;右边填充:2px;边距顶部:10px;}
#制表符{浮动:左;列表样式:无;边框顶部:1px实心#ccc;边框左侧:1px实心#ccc;边框右侧:1px实心#ccc;边框右侧:5px;
边框左上半径:3px;边框右上半径:3px;轮廓:无;}
#制表符li a{字体系列:calibri;字体大小:15px;颜色:5685bc;顶部填充:5px;左侧填充:7px;右侧填充:7px;底部填充:8px;
显示:块;背景:#FFF;边框左上半径:3px;边框右上半径:3px;文本装饰:无;轮廓:无;}
#制表符li a.inactive{顶部填充:3px;底部填充:8px;左侧填充:8px;右侧填充:8px;颜色:#666666;背景:#EEE;轮廓:无;
边框底部:实心1px#CCC;}
#tabs li a:hover,#tabs li a.inactive:hover{color:#5685bc;outline:none;}
.container2{清除:两个;宽度:99%;边框:0px实心#CCC;填充顶部:2px;边距:0自动;}
.container2h2{左边距:15px;右边距:15px;底部距:10px;颜色:#5685bc;}
.container2 p{左边距:15px;右边距:15px;上边距:10px;下边距:10px;行高:1.3;字体大小:小;}
.container2 ul{左边距:25px;字体大小:小;行高:1.4;列表样式类型:disc;}
.container2 li{填充底部:5px;左边距:5px;}
$(文档).ready(函数()
{
$('#tabs li a:not(:first)).addClass('inactive');
$('.container2').hide();
$('.container2:first').show();
$('a')。单击(函数()
{
var t=$(this.attr('id');
if($(this).hasClass('inactive'))
{//这是我们状况的开始
$('a').addClass('inactive');
$(this.removeClass('inactive');
$('.container2').hide();
$('#'+t+'C').fadeIn('slow');
}
});
});
- 表格1
- 表格2
用户名*
名字*
全名*
最糟糕的方法是检查POST变量并定义应该选择哪个选项卡。请参阅我在
标记中所做的修改。它没有经过测试,但我希望你能明白这一点。不过,最好的方法是使用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>
#制表符{宽度:100%;高度:30px;边框底部:实心1px#CCC;右边填充:2px;边距顶部:10px;}
#制表符{浮动:左;列表样式:无;边框顶部:1px实心#ccc;边框左侧:1px实心#ccc;边框右侧:1px实心#ccc;边框右侧:5px;
边框左上半径:3px;边框右上半径:3px;轮廓:无;}
#制表符li a{字体系列:calibri;字体大小:15px;颜色:5685bc;顶部填充:5px;左侧填充:7px;右侧填充:7px;底部填充:8px;
显示:块;背景:#FFF;边框左上半径:3px;边框右上半径:3px;文本装饰:无;轮廓:无;}
#制表符li a.inactive{顶部填充:3px;底部填充:8px;左侧填充:8px;右侧填充:8px;颜色:#666666;背景:#EEE;轮廓:无;
边框底部:实心1px#CCC;}
#tabs li a:hover,#tabs li a.inactive:hover{color:#5685bc;outline:none;}
.container2{清除:两个;宽度:99%;边框:0px实心#CCC;填充顶部:2px;边距:0自动;}
.container2h2{左边距:15px;右边距:15px;底部距:10px;颜色:#5685bc;}
.container2 p{左边距:15px;右边距:15px;上边距:10px;下边距:10px;行高:1.3;字体大小:小;}
.container2 ul{左边距:25px;字体大小:小;行高:1.4;列表样式类型:disc;}
.container2 li{填充底部:5px;左边距:5px;}
$(文档).ready(函数()
{
$('a:first').addClass('inactive');
$('.container2').hide();
$('.container2:last').show();
$('#tabs li a:not(:first)).addClass('inactive');
$('.container2').hide();
$('.container2:first').show();
$('a')。单击(函数()
{
var t=$(this.attr('id');
if($(this).hasClass('inactive'))
{//这是我们状况的开始
$('a').addClass('inactive');
$(this.removeClass('inactive');
$('.container2').hide();
$('#'+t+'C').fadeIn('slow');
}
});
});
- 表格1
- 表格2
用户名*
名字*
全名*
谢谢你的帮助@jazZRo