使用Bootstrap选项卡时jsp表单不起作用
使用Bootstrap选项卡时，jsp表单不起作用的原因可能是由于选项卡的切换导致表单元素无法正确获取焦点或提交数据。解决这个问题的方法是使用Bootstrap的事件回调函数来处理表单操作。
首先，确保在引入Bootstrap的JavaScript文件之前引入jQuery库，因为Bootstrap依赖于jQuery。
然后，在选项卡切换时，可以使用Bootstrap提供的事件回调函数来处理表单操作。例如，可以使用shown.bs.tab事件来监听选项卡的显示事件，然后在回调函数中执行表单操作。
示例代码如下：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap选项卡示例</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.5.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
<form>
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" placeholder="Enter your name">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
<form>
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" placeholder="Enter your email">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
$('#myTab a').on('shown.bs.tab', function (e) {
// 获取当前激活的选项卡的ID
var activeTab = $(e.target).attr('href');
// 根据ID找到对应的表单元素
var form = $(activeTab).find('form');
// 在这里可以执行表单操作，例如验证表单、提交表单等
console.log('当前激活的选项卡ID：', activeTab);
console.log('当前激活的表单：', form);
});
});
</script>
</body>
</html>在上述示例代码中，我们使用了Bootstrap的选项卡组件，并在选项卡切换时通过shown.bs.tab事件回调函数来处理表单操作。你可以根据实际需求在回调函数中执行相应的操作，例如表单验证、数据提交等。
推荐的腾讯云相关产品：腾讯云服务器（CVM）和腾讯云数据库（TencentDB）。腾讯云服务器提供了稳定可靠的云服务器实例，可满足各种规模的应用需求；腾讯云数据库提供了高性能、可扩展的数据库服务，支持多种数据库引擎和存储类型。
腾讯云服务器（CVM）产品介绍链接：https://cloud.tencent.com/product/cvm
腾讯云数据库（TencentDB）产品介绍链接：https://cloud.tencent.com/product/cdb
相关·内容
1回答
</div></form>当我将Bootstrap选项卡留在表单之外时，它可以正常工作。不能忽略选项卡，因为它们包含必须返回到servlet的信息。
这是在表单中放置标签的一种方式吗？或者定义当我单击某个按钮(在所述页面上)时，该按钮将调用表单并包含所有信息并将其发送到s
浏览 5提问于2017-03-14得票数 0
回答已采纳
我正在一个web应用程序中工作，我有一个包含jQuery UI选项卡的表单。我需要在多个页面中使用相同的表单，所以我把它放在一个jsp文件中，并试图使用.load()函数来获得它。$('#someDiv').load('someJsp.jsp?attribute=value',function(){});
它在所有表单中都工作得很好，但是当它加载UI选项卡时，它会将其中一个显示
浏览 3提问于2014-03-11得票数 0
1回答
Jsp html表单验证不起作用
、、、、
在仪表板中，使用bootstrap将一个链接包装在导航栏中DashboardUser.jsp是用于创建新用户的表单所有表单输入都标有required。因此，如果我尝试在不填写文本字段的情况下提交表单，它会起作用(没有验证)。servlet获取所有具有null的属性，并在转发到Das
浏览 1提问于2016-04-07得票数 0
我有一个表单，在这个表单中，我有来自BootStrap的导航选项卡。在我的ViewModel中，我为每个项目添加了数据注释...我的问题是:当提交按钮被点击时，验证通常会出现在活动选项卡上，但在其他选项卡(隐藏)中，验证似乎不起作用……只有当我切换到该选项卡并尝试再次提交表单时，它才会起作用，然后才会验证该选项卡。如何让数据批注在隐藏选项卡上以与在活动选项
浏览 2提问于2015-03-31得票数 1
我想要加载一个带有多个选项卡式HTML表单(与JSP，Bootstrap，JS，AJAX当然)从一个Spring控制器使用GET方法的单个页面。在这里，不同的选项卡将接受输入或显示来自不同表的数据。
浏览 3提问于2015-11-18得票数 0
我刚开始学习bootstrap，我正在尝试创建一个这样的表单页面，这是我用JSP语言制作的，.This是页面的一部分。
但是当我尝试使用bootstrap时，我所能想到的就是这样的东西。我想知道如何继续使用纯html重新创建.I尝试的内容的表单/指南。但是我想不出一个像我用JSP制作的表单
浏览 2提问于2016-11-20得票数 0
1回答
我使用的是jQuery选项卡，每个选项卡都使用一个表单。我在最后一张表格上有一个提交按钮。如果所有表单的验证都成功，我希望能够提交所有的表单。:include page="/pages/tab1.jsp" /> <s:div id="tabs-2">
浏览 4提问于2014-11-14得票数 0
回答已采纳
2回答
单击按钮时如何打开新页
、、、、
我正在eclipse上本地开发一个web应用程序，并使用Servlets、JSP和html文档来设计网页。因此，当单击“注册”时，如何让服务器加载带有文本输入框的新页面？
谢谢。
浏览 7提问于2015-06-15得票数 0
回答已采纳
有没有一种方法可以在不使用JSP的情况下向Spring Boot提交html表单？我所能找到的就是使用JSP的示例。
浏览 20提问于2020-10-14得票数 0
1回答
我正在尝试创建一个bootstrap演示页面，其中包含两个选项卡，每个选项卡包含一个表单，其中包含几个输入字段和一个取消和提交按钮。当我切换选项卡时，我想检查表单是否脏(如果表单中的任何字段已更改但尚未提交)。如果窗体是脏的，我希望突出显示包含该窗体的选项卡。我是Bootstrap的新手，正在尝试让这个用例正常工作。我试着用谷歌搜索了一下这个问题，我找到了一些解决方案，使用Angular JS来检查
浏览 3提问于2015-02-04得票数 1
我在jsp页面中有一个表单，如下所示。表格1-表格1-表格1
我想在jsp页面中显示多个选项卡。所有选项卡都有相同的表单要提交。现在，当用户从表1提交时，我想从表1移到表2。
浏览 4提问于2014-02-14得票数 0
回答已采纳
我有以下代码：
我正在使用html创建一个基本表单。这个表单有两个部分--每个部分都包含在一个选项卡中(用Twitter Bootstrap创建的选项卡)。当我现在尝试这样做时，它只提交表单。Twitter Bootstrap已经提供了一个功能，可以让你通过外部按钮切换选项卡吗？如果是这样，你如何使用它？
浏览 2提问于2012-08-09得票数 13
回答已采纳
我的问题是，我有一个包含字段(例如:姓名、城市等)的jsp页面(比如one.jsp)，当我点击提交按钮后，一个新的jsp(two.jsp)在一个新的选项卡中打开，其中包含一个单选按钮'I accept‘当用户现在单击此单选按钮时，应该执行业务逻辑。但问题是one.jsp的表单值(名称、城市等值)丢失了。
使用window.open打开新的jsp页面并不是对服务器的新请求。我想知道为什么表单
浏览 0提问于2013-05-29得票数 4
我有一个有五个选项卡的表单。在其中一个选项卡(background.jsp) on change of a checkbox(处于选中或未选中状态)中，我尝试将jsp中(hasGenderChanged)的标志设置为true，并使用请求类型将其发送到我的Introduction.jsp有所有的标题选项卡，在它的末尾有点击保存按钮在这个页面上，我想发送如果一个复选框在填写表单过程中发生了变化。如果改变了，希望从JSP发
浏览 2提问于2014-06-01得票数 4
2回答
不清楚邮件的形式内容
、、、、
我使用的是一个带有选项卡的Spring表单，每个选项卡都有一个表单。问题是这是我第一次使用Spring、JSP、jQuery。administ
浏览 5提问于2016-05-25得票数 1
回答已采纳
2回答
JSP验证用户来自上一页
、、、、
在我的JSP webapp中，我想验证用户是否来自我的特定页面http://myapplication.com/foo.jsp。在执行检查的页面上，我可以这样做：然后将ref与http://myapplication.com/foo.jsp进行比较
浏览 1提问于2011-03-16得票数 1
回答已采纳
1回答
我无法将css链接到JSP页面-webapp css WEB-INF app.jsp<link rel="stylesheet" href="https://formden.com/static/cdn/bootst
浏览 11提问于2016-09-25得票数 1
回答已采纳
我在一个jsp页面上有一个链接。这个新页面的视图由action类定义，它需要一个表单字段值。我面临的问题是，在不提交表单的情况下，我无法将表单字段的值获取到操作类。并且提交表单也改变了原始jsp的视图，这违背了打开新选项卡的全部目的。因此，我需要一种方法来获得操作类的表单字段值，而不需要重置原始jsp页面的视图。
我遇到的一种方法是重写URL，但
浏览 5提问于2012-05-09得票数 2
回答已采纳
我有一个包含在文件A和B中的menu.jsp文件。这个文件包含一个如下所示的菜单。多亏了data-toggle=" tab“，所选的选项卡处于活动状态。但是，我也想使用href转到那个特定的页面。<ul id="navbar_menu" class="nav nav-tabs" role="tablist">
<li><a data-toggle="tab" href="filea.jsp</em
浏览 1提问于2015-04-11得票数 2
1回答
我有一个名为requisition.jsp的页面，在这个页面上首先提交表单以提出申请，其中我提到了访问者的数量。页面上，我有一个已经提交的表单，在它下面是与我输入的访问者数量相等的选项卡数。在每个选项卡中都有一个供访问者使用的表单。我会填写第一个访问者的表格并提交它。(request, response);
但是在这里，我应该进入requisition.jsp页面，在这里我已经为第一个访问者提交了表单，但是我还没有为其他访问者提交<e
浏览 2提问于2014-03-07得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
