Question

我想在我的页面中添加标签按组来组织我的输入字段，但这只是一个模板。问题是，当我点击一个标签页时，页面会提交并给我一个404错误页面，而且不应该这样。

复制了这个例子

请注意我是javascript和html的新手。我不知道什么是错的。我试图在我的javascript函数上添加return false，但页面仍然提交，我还添加了一个＆＃39; onsubmit＆＃39;属性设置为＆＃39;在按钮标记上返回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>

我可以尝试哪些其他解决方案？

Answer 1

如果表单中包含按钮元素，则其默认类型为“submit”。这意味着，当他们被点击时，他们提交表单。有多种方法可以阻止此操作，例如，您可以从事件处理程序中调用event.preventDefault()。

但最简单的解决方案是将button元素的type属性更改为“button”。这将阻止在单击按钮时提交表单。引用MDN：

[type type]的可能值为：

提交：该按钮将表单数据提交给服务器。如果未指定属性，或者属性动态更改为空值或无效值，则这是默认值。

重置：该按钮会将所有控件重置为初始值。

按钮：该按钮没有默认行为。它可以具有与元素事件关联的客户端脚本，这些脚本在事件发生时触发。

所以不是，

<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>

Answer 2

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;

Answer 3

使用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

，可以参考下面的内容

Answer 4

使用按钮类型=“按钮”

由于您没有提及提交表单的按钮类型

Answer 5

更新以在onclick事件

上返回功能

  <button class="tablinks" onclick="return viewTab(event, 'capitalrequest')"
        onsubmit="return false;">Capital Request</button>

单击选项卡时如何阻止页面提交？

5 个答案: