CODEWITHSUNDEEP
javascripthtmltabs
Patrick Tolentino
Patrick Tolentino

Reputation: 79

How can I prevent the page from submitting when I click a tab?

I wanted to add tabs in my page to organize my input fields by groups but this is only a template yet. The problem is, when I click a tab, the page submits and gives me a 404 error page and it shouldn't.

I just copied the example from the w3school how to switch tabs

Please note I am newbie in javascript and html. I don't know what's wrong. I tried to add return false on my javascript function but the page still submits and I also added an 'onsubmit' attribute set to 'return false on the button tag.

I tried to comment out the <form action="...> tags and it worked of course by not submitting the page.

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

What other solutions can I try?

Upvotes: 1

Views: 1471

Answers (5)

Vignesh
Vignesh

Reputation: 11

Use button type="button"

Since you didnt mention the type of the button it submitting the form

Upvotes: 1

Vash
Vash

Reputation: 141

Using a preventDefault should get the job done for you.Try this 

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

Here is more on it if you like preventDefault

Upvotes: 1

hitesh makodiya
hitesh makodiya

Reputation: 437

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;

Upvotes: 2

Nisarg Shah
Nisarg Shah

Reputation: 14562

When you have button elements inside a form, their default type is "submit". Which means, when they are clicked, they submit the form. There are various ways of preventing this action, for example, you could call event.preventDefault() from the event handler.

But the simplest solution is to change the type attribute of the button element to "button". This would prevent the form from submitting when the button is clicked. To quote 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.

So instead of,

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

It should be:

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

You can also remove onsubmit="return false;" as it is no longer necessary.

Here's a snippet to show how the page would work after making that change:

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>

Upvotes: 2

programtreasures
programtreasures

Reputation: 4298

update to return function on onclick event

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

Upvotes: 0

Related Questions