单击选项卡时如何阻止页面提交？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了单击选项卡时如何阻止页面提交？相关的知识，希望对你有一定的参考价值。
我想在我的页面中添加选项卡以按组组织我的输入字段，但这只是一个模板。问题是，当我单击一个选项卡时，页面提交并给我一个404错误页面，它不应该。
我刚从w3school how to switch tabs复制了这个例子
请注意我是javascript和html的新手。我不知道出了什么问题。我试图在我的javascript函数上添加return false，但页面仍然提交，我还添加了一个'onsubmit'属性设置为'在按钮标记上返回false。
我试图评论<form action="...>标签，当然它没有提交页面。
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script>
function viewTab(evt, tabId) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className
.replace(" active", "");
}
document.getElementById(tabId).style.display = "block";
evt.currentTarget.className += " active";
return false;
}
</script>
<style>
body {
font-family: Arial;
}
/* Style the tab */
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
/* Style the buttons inside the tab */
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
</style>
</head>
<body>
<form:errors />
<form action="/CapitalApprovalProcessTool/createrequest" method="post">
enter all request input fields <input type="text" />
<div class="tab">
<button class="tablinks" onclick="viewTab(event, 'capitalrequest')"
onsubmit="return false;">Capital Request</button>
<button class="tablinks" onclick="viewTab(event, 'capitalequip')"
onsubmit="return false;">Capital Equipment</button>
<button class="tablinks" onclick="viewTab(event, 'capitalattach')"
onsubmit="return false;">Capital Attachments</button>
</div>
<div id="capitalrequest" class="tabcontent">
<h3>Capital Request</h3>
</div>
<div id="capitalequip" class="tabcontent">
<h3>Capital Equipment</h3>
</div>
<div id="capitalattach" class="tabcontent">
<h3>Capital Attachments</h3>
</div>
</form>
</body>
</html>
我可以尝试哪些其他解决方案？
答案
如果表单中包含按钮元素，则其默认类型为“submit”。这意味着，当他们被点击时，他们提交表单。有多种方法可以阻止此操作，例如，您可以从事件处理程序中调用event.preventDefault()。
但最简单的解决方案是将按钮元素的type属性更改为“button”。这将阻止在单击按钮时提交表单。引用MDN：
[type属性]的可能值为：
submit：该按钮将表单数据提交给服务器。如果未指定属性，或者属性动态更改为空值或无效值，则这是默认值。
reset：该按钮将所有控件重置为初始值。
按钮：该按钮没有默认行为。它可以具有与元素事件关联的客户端脚本，这些脚本在事件发生时触发。
而不是，
<button class="tablinks" onclick="viewTab(event, 'capitalrequest')" onsubmit="return false;">Capital Request</button>
它应该是：
<button type="button" class="tablinks"
onclick="viewTab(event, 'capitalrequest')"
onsubmit="return false;">Capital Request</button>
您也可以删除onsubmit="return false;"，因为它不再需要。
这是一个片段，显示在进行更改后页面如何工作：
function viewTab(evt, tabId) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className
.replace(" active", "");
}
document.getElementById(tabId).style.display = "block";
evt.currentTarget.className += " active";
return false;
}body {
font-family: Arial;
}
/* Style the tab */
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
/* Style the buttons inside the tab */
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}<body>
<form:errors />
<form action="/CapitalApprovalProcessTool/createrequest" method="post">
enter all request input fields <input type="text" />
<div class="tab">
<button type="button" class="tablinks" onclick="viewTab(event, 'capitalrequest')" onsubmit="return false;">Capital Request</button>
<button type="button" class="tablinks" onclick="viewTab(event, 'capitalequip')" onsubmit="return false;">Capital Equipment</button>
<button type="button" class="tablinks" onclick="viewTab(event, 'capitalattach')" onsubmit="return false;">Capital Attachments</button>
</div>
<div id="capitalrequest" class="tabcontent">
<h3>Capital Request</h3>
</div>
<div id="capitalequip" class="tabcontent">
<h3>Capital Equipment</h3>
</div>
<div id="capitalattach" class="tabcontent">
<h3>Capital Attachments</h3>
</div>
</form>
</body>另一答案
You just add this line in your js function like below,
document.getElementById(tabId).style.display = "block";
evt.currentTarget.className += " active";
**evt.preventDefault();**
return false;
另一答案
使用preventDefault应该为你完成工作。试试这个
function viewTab(evt, tabId) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className
.replace(" active", "");
}
document.getElementById(tabId).style.display = "block";
evt.currentTarget.className += " active";
evt.preventDefault
return false;
}
如果你喜欢preventDefault，那就更多了
另一答案
使用按钮类型=“按钮”
由于您没有提及提交表单的按钮类型
另一答案
更新以返回onclick事件的函数
<button class="tablinks" onclick="return viewTab(event, 'capitalrequest')"
onsubmit="return false;">Capital Request</button>
以上是关于单击选项卡时如何阻止页面提交？的主要内容，如果未能解决你的问题，请参考以下文章
当我从一个选项卡单击到另一个选项卡时，如何使TabLayout中的选项卡不可滚动