Как я могу предотвратить отправку страницы при нажатии на вкладку?
Я хотел добавить на свою страницу вкладки, чтобы упорядочить поля ввода по группам, но это пока только шаблон. Проблема в том, что когда я нажимаю вкладку, страница отправляется и выдает мне страницу с ошибкой 404, а этого не должно быть.
Я просто скопировал пример из w3school как переключать вкладки
Обратите внимание: я новичок в javascript и html. Я не знаю, что случилось. Я попытался добавить return false в свою функцию javascript, но страница все еще отправляется, и я также добавил атрибут onsubmit, для которого установлено значение return 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>
Какие еще решения я могу попробовать?
После function viewTab(evt, tabId) {line попробуйте добавить evt.preventDefault();
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 5
обновление для возврата функции при событии onclick
<button class = "tablinks" onclick = "return viewTab(event, 'capitalrequest')"
onsubmit = "return false;">Capital Request</button>
Когда у вас есть элементы кнопки внутри формы, их тип по умолчанию - «отправить». Это означает, что при нажатии на них они отправляют форму. Есть разные способы предотвратить это действие, например, вы можете вызвать event.preventDefault() из обработчика событий.
Но самое простое решение - изменить атрибут type элемента button на «button». Это предотвратит отправку формы при нажатии кнопки. Процитируем MDN:
Possible values [for type attribute] are:
submit: The button submits the form data to the server. This is the default if the attribute is not specified, or if the attribute is dynamically changed to an empty or invalid value.
reset: The button resets all the controls to their initial values.
button: The button has no default behavior. It can have client-side scripts associated with the element's events, which are triggered when the events occur.
Так что вместо
<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>Ух ты. Спасибо. Я не знал, что здесь можно запускать фрагменты кода. это решение сработало и для меня
@PatrickTolentino Да, можно. Когда вы редактируете свой вопрос или ответ, есть кнопка [<>], которая позволит вам создать фрагмент.
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
Я добавил "evt.preventDefault ();" после "evt.currentTarget.className + = " active ";" Благодарность! это тоже сработало!
Используйте button type = "button"
Поскольку вы не упомянули тип кнопки, с которой отправляется форма
evt.preventDefault