以下是我的jsp页面的代码。我有一个页面，其中表单被分成选项卡。有下一个按钮可以导航。我想要的是将数据从输入字段发送到servlet，我将把它们放在数据库中。
但是，怎么做呢？ 我尝试在最后一个标签内提供按钮类型提交，但这不起作用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" type="text/css" href="css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Real Estate</title>
<!-- Bootstrap -->
<script src="js/crawler.js" type="text/javascript"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Include Bootstrap CSS -->
<script src="js/jquery-1.11.3.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.js"></script>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Optional Bootstrap theme -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"
integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r"
crossorigin="anonymous">
<!-- Include SmartWizard CSS -->
<link href="css/smart_wizard.min.css" rel="stylesheet" type="text/css" />
<!-- Optional SmartWizard theme -->
<link href="css/smart_wizard_theme_dots.min.css" rel="stylesheet"
type="text/css" />
<script language="javascript" type="application/javascript">
$('#myModal').modal('show');
marqueeInit({
uniqueid : 'mycrawler2',
style : {
},
inc : 5, //speed - pixel increment for each iteration of this marquee's movement
mouse : 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)
moveatleast : 2,
neutral : 150,
savedirection : true,
random : true
});
</script>
</head>
<body>
<nav class="navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse" data-target="#myInverseNavbar2"
aria-expanded="false">
<span class="sr-only">Toggle navigation</span> <span
class="icon-bar"></span> <span class="icon-bar"></span> <span
class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">RoofandKey</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="myInverseNavbar2">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown"><a href="#" class="dropdown-toggle"
data-toggle="dropdown" role="button" aria-expanded="false"
aria-haspopup="true">Buy <span class="caret"></span></a>
<ul class="dropdown-menu multi-column columns-2">
<div class="row">
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li
style="color: blue; padding-left: 20px; font-size: 15px; font-family: Cambria, Hoefler Text, Liberation Serif, Times, Times New Roman, serif">Residential</li>
<li role="separator" class="divider"></li>
<li><a href="#">Under Construction Flats</a></li>
<li><a href="#">Ready to move flats</a></li>
<li><a href="#">House/Villa</a></li>
<li><a href="#">Plots</a></li>
<li><a href="#">Owner Properties</a></li>
</ul>
</div>
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li
style="color: blue; padding-left: 20px; font-size: 15px; font-family: Cambria, Hoefler Text, Liberation Serif, Times, Times New Roman, serif">Commercial</li>
<li role="separator" class="divider"></li>
<li><a href="#">Office Space</a></li>
<li><a href="#">Commertial Shops</a></li>
</ul>
</div>
</div>
</ul></li>
<li class="dropdown"><a href="#" class="dropdown-toggle"
data-toggle="dropdown" role="button" aria-expanded="false"
aria-haspopup="true">Rent <span class="caret"></span></a>
<ul class="dropdown-menu multi-column columns-2">
<div class="row">
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li
style="color: blue; padding-left: 20px; font-size: 15px; font-family: Cambria, Hoefler Text, Liberation Serif, Times, Times New Roman, serif">Residential</li>
<li role="separator" class="divider"></li>
<li><a href="#">Flats</a></li>
<li><a href="#">House/Villa</a></li>
<li><a href="#">PG's</a></li>
<li><a href="#">Owner Properties</a></li>
</ul>
</div>
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li
style="color: blue; padding-left: 20px; font-size: 15px; font-family: Cambria, Hoefler Text, Liberation Serif, Times, Times New Roman, serif">Commercial</li>
<li role="separator" class="divider"></li>
<li><a href="#">Office Space</a></li>
<li><a href="#">Commercial Shops</a></li>
</ul>
</div>
</div>
</ul></li>
<li><a href="advertise.jsp" class="" role="button">Post
Property free </a></li>
<%
if (session.getAttribute("username") == null) {
%>
<li><a data-toggle="modal" href="#myModal"><i
class="hd-dign"><img src="images/signin.png"></i>Sign in</a></li>
<%
} else {
%>
<li style="margin-top: 15px;">Welcume <%=session.getAttribute("username")%></li>
<li><form class="form-horizontal" method="post"
action="getlogout">
<input type="submit" value="logout">
</form></li>
<%
}
%>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">
Login/Registration</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-8"
style="border-right: 1px dotted #C2C2C2; padding-right: 30px;">
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="active"><a href="#Login" data-toggle="tab">Login</a></li>
<li><a href="#Registration" data-toggle="tab">Registration</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="Login">
<form class="form-horizontal" name="form1" method="post"
action="UserLogin">
<div class="form-group">
<label for="email" class="col-sm-2 control-label">
Email</label>
<div class="col-sm-10">
<input type="email" name="txtmail" class="form-control"
id="email1" placeholder="Email" />
</div>
</div>
<div class="form-group">
<label for="exampleInputPassword1"
class="col-sm-2 control-label"> Password</label>
<div class="col-sm-10">
<input type="password" name="txtpassword"
class="form-control" id="exampleInputPassword1"
placeholder="Email" />
</div>
</div>
<div class="row">
<div class="col-sm-2"></div>
<div class="col-sm-10">
<button type="submit" class="btn btn-primary btn-sm">
Submit</button>
<a href="javascript:;">Forgot your password?</a>
</div>
</div>
</form>
</div>
<div class="tab-pane" id="Registration">
<form action="UserRegister" method="post" role="form"
class="form-horizontal">
<div class="form-group">
<label for="email" class="col-sm-2 control-label">
Name</label>
<div class="col-sm-10">
<div class="row">
<div class="col-md-9">
<input type="text" name="txtname" class="form-control"
placeholder="Name" />
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="type" class="col-sm-2 control-label">
Type</label>
<div class="col-sm-10">
<div class="row">
<div class="col-md-3">
<select name="txttype" class="form-control">
<option>Seller</option>
<option>Buyer</option>
<option>Both</option>
</select>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">
Mobile</label>
<div class="col-sm-10">
<input type="mobile" name="txtmobile"
class="form-control" id="email" placeholder="Email" />
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">
Email</label>
<div class="col-sm-10">
<input type="email" name="txtmail" class="form-control"
id="email" placeholder="Email" />
</div>
</div>
<div class="form-group">
<label for="gender" class="col-sm-2 control-label">
Gender</label>
<div class="row">
<div class="col-md-3">
<select name="txtgender" class="form-control">
<option>Male</option>
<option>Female</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">
Password</label>
<div class="col-sm-10">
<input type="password" name="txtpassword"
class="form-control" id="password"
placeholder="Password" />
</div>
</div>
<div class="row">
<div class="col-sm-2"></div>
<div class="col-sm-10">
<button type="submit" class="btn btn-primary btn-sm">
Save & Continue</button>
<button type="button" class="btn btn-default btn-sm">
Cancel</button>
</div>
</div>
</form>
</div>
</div>
<div id="OR" class="hidden-xs">OR</div>
</div>
<div class="col-md-4">
<div class="row text-center sign-with">
<div class="col-md-12">
<h3>Sign in with</h3>
</div>
<div class="col-md-12">
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-primary">Facebook</a> <a
href="#" class="btn btn-danger"> Google</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div class="container">
<br />
<form action="index.jsp" id="myForm" role="form" data-toggle=""
method="post" accept-charset="utf-8">
<!-- SmartWizard html -->
<div id="smartwizard">
<ul>
<li><a href="#step-1"><small>Email Address</small></a></li>
<li><a href="#step-2"><small>Name</small></a></li>
<li><a href="#step-3"><small>Address</small></a></li>
<li><a href="#step-4"><small>Terms and Conditions</small></a></li>
</ul>
<div>
<div id="step-1">
<h2>Your Email Address</h2>
<div id="form-step-0" role="form" data-toggle="">
<div class="form-group">
<label for="email">Email address:</label> <input type="email"
class="form-control" name="email" id="email"
placeholder="Write your email address" required>
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div id="step-2">
<h2>Your Name</h2>
<div id="form-step-1" role="form" data-toggle="">
<div class="form-group">
<label for="name">Name:</label> <input type="text"
class="form-control" name="name" id="email"
placeholder="Write your name" required>
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div id="step-3">
<h2>Your Address</h2>
<div id="form-step-2" role="form" data-toggle="">
<div class="form-group">
<label for="address">Address</label>
<textarea class="form-control" name="address" id="address"
rows="3" placeholder="Write your address..." required></textarea>
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div id="step-4" class="">
<h2>Terms and Conditions</h2>
<p>Terms and conditions: Keep your smile :)</p>
<div id="form-step-3" role="form" data-toggle="">
<div class="form-group">
<label for="terms">I agree with the T&C</label> <input
type="checkbox" id="terms"
data-error="Please accept the Terms and Conditions" required>
<div class="help-block with-errors"></div>
</div>
</div>
<input type="button" for="button" id="button" value="Finish"
class="btn-info disabled btn-finish">
</div>
</div>
</div>
</form>
</div>
<!-- Include jQuery -->
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include jQuery Validator plugin -->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.5/validator.min.js"></script>
<!-- Include SmartWizard JavaScript source -->
<script type="text/javascript" src="js/jquery.smartWizard.min.js"></script>
<script type="text/javascript">
$(document).ready(
function() {
// Smart Wizard
$('#smartwizard').smartWizard(
{
selected : 0,
theme : 'dots',
transitionEffect : 'fade',
toolbarSettings : {
toolbarPosition : 'bottom',
toolbarExtraButtons : [
{
label : 'Cancel',
css : 'btn-danger',
onClick : function() {
$('#smartwizard').smartWizard(
"reset");
$('#myForm')
.find("input, textarea")
.val("");
}
} ]
}
});
$("#smartwizard")
.on(
"showStep",
function(e, anchorObject, stepNumber,
stepDirection) {
// Enable finish button only on last step
if (stepNumber == 3) {
$('.btn-finish').removeClass(
'disabled');
} else {
$('.btn-finish').addClass(
'disabled');
}
});
});
</script>
<footer class="text-center">
<div class="container">
<div class="row">
<div class="col-xs-12">
<p>Copyright © MyWebsite. All rights reserved.</p>
</div>
</div>
</div>
</footer>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
</body>
</html
答案 0 :(得分：2)
我的第一个假设是，您为每个标签使用了不同的表单。事实并非如此。
我尝试了你的代码，没有任何本地的CSS和没有crawler.js
您需要提交按钮才能提交表单 或者ajax进程。
我将完成按钮更改为type =＆＃34;提交＆＃34;它有效。为了测试，我添加了虚拟文本＆＃34; hizbk＆＃34;在电子邮件字段中。这阻止了提交，因为验证失败。但是如果数据正确，则提交表格。
因此，您需要将焦点移到无效的表单字段/选项卡上。
编辑1：
您无法提交的原因是html5集成验证。
您的文档以第<!DOCTYPE html>行开头，表示html5文档。
在html5中，有许多new types of form fields和以前的html版本一样。
在您的示例中，您使用的是＆＃34; email＆＃34;并且该字段是＆＃34;必需＆＃34;：
<input的类型=＆＃34;电子邮件＆＃34; class="form-control" name="email" id="email" placeholder="Write your email address"的需要 >
因此，为了提交电子邮件必须设置（因为＆＃34;重新排列＆＃34;）并且必须具有有效的电子邮件语法＆＃34; something@domain.tld" （有效性检查取决于浏览器）
编辑2： 要在每个步骤后触发部分验证，您必须使用jquery.smartWizard.js event处理程序：
$("#smartwizard").on("leaveStep", function(e, anchorObject, stepNumber) {
console.log(anchorObject);
console.log(stepNumber);
var containerId = '#form-step-' + stepNumber;
var valid = true;
$(containerId)
// lets assume there are more than one form field in a tab
.find('input, textarea, button, select')
// for each of them check the validity
.each(function(index, element) {
console.log(element.name + ":");
console.log(element.validity.valid ? "valid": "not valid");
if (element.validity.valid == false) {
valid = false;
}
}
);
// if something is not valid, false will be returned, which prevent the tab swiching.
return valid;
//return confirm("Do you want to leave the step "+stepNumber+"?");
});
您可以检查字段的有效性，并找到触发突出显示的方法，如果无效......
但我们离原始问题很远
您应该考虑使用以下内容扩展问题的主题：
部分表单验证