Как я могу предотвратить отправку страницы при нажатии на вкладку? - PullRequest
Новая
       3

Как я могу предотвратить отправку страницы при нажатии на вкладку?

0 голосов
/ 02 мая 2018

Я хотел добавить вкладки на своей странице, чтобы упорядочить поля ввода по группам, но это пока только шаблон. Проблема в том, что когда я щелкаю вкладку, страница отправляется и выдает мне страницу с ошибкой 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>

Какие еще решения можно попробовать?

Ответы [ 5 ]

0 голосов
/ 02 мая 2018

Использовать кнопку type = "button"

Поскольку вы не указали тип кнопки, отправляющей форму

0 голосов
/ 02 мая 2018

Использование 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;
    }

Вот еще, если вам нравится protectDefault

0 голосов
/ 02 мая 2018

Если у вас есть элементы кнопки внутри формы, их тип по умолчанию - «отправить». Это означает, что при нажатии они отправляют форму. Существуют различные способы предотвращения этого действия, например, вы можете вызвать event.preventDefault() из обработчика событий.

Но самое простое решение - изменить атрибут type элемента button на «button». Это предотвратит отправку формы при нажатии кнопки. Цитировать MDN :

Возможные значения [для атрибута типа]:

submit : Кнопка отправляет данные формы на сервер. Это значение по умолчанию, если атрибут не указан или атрибут динамически изменяется на пустое или недопустимое значение.

сброс : кнопка сбрасывает все элементы управления к их начальным значениям.

кнопка : кнопка не имеет поведения по умолчанию. Он может иметь клиентские сценарии, связанные с событиями элемента, которые запускаются при возникновении событий.

Так что вместо 

<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>
0 голосов
/ 02 мая 2018 
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;
0 голосов
/ 02 мая 2018

обновление для возврата функции onclick событие 

  <button class="tablinks" onclick="return viewTab(event, 'capitalrequest')"
        onsubmit="return false;">Capital Request</button>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...