Why the Form action in html is automatically triggered?

Question

<!DOCTYPE html>
<html>
<head>
<style>
button.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}

button.accordion.active, button.accordion:hover {
    background-color: #ddd;
}

button.accordion:after {
    content: '\02795';
    font-size: 13px;
    color: #777;
    float: right;
    margin-left: 5px;
}

button.accordion.active:after {
    content: "\2796";
}

div.panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: 0.6s ease-in-out;
    opacity: 0;
}

div.panel.show {
    opacity: 1;
    max-height: 500px;
}
</style>
</head>
<body>

<form action="page2.html">

<button class="accordion">Section 1</button>
<div class="panel">
    Ch.1: <input type=checkbox id="ch1" ><br>
    Ch.1: <input type=checkbox id="ch1"><br>
    Ch.1: <input type=checkbox id="ch1"><br>
</div>

<button class="accordion">Section 2</button>
<div class="panel">
    Ch.1: <input type="checkbox" id="ch1"><br>
    Ch.1: <input type="checkbox" id="ch1"><br>
    Ch.1: <input type="checkbox" id="ch1"><br>
</div>

<br>
<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function(){
        this.classList.toggle("active");
        this.nextElementSibling.classList.toggle("show");
  }
}
</script>

</body>
</html>

When I am trying to click on "section 1" or "section 2", the page is automatically redirecting to page2.html. Why is this happening? And with the same code, what should i do to add a java script function on "onsubmit"?

Add `onsubmit="return false;"` in the form tag – Vinay Jul 08 '16 at 05:01 — Vinay, Jul 08 '16 at 05:01

score 0 · Answer 1 · edited May 23 '17 at 12:22

0

Use input tag with type as button

<input type="button"></input>

Since all the button elements inside form tag considered as submit type.

For more info about buttons and input elements check the below link.

Difference between <input type='submit' /> and <button type='submit'>text</button>

edited May 23 '17 at 12:22

Community

1
1

answered Jul 08 '16 at 05:00

Mohan Rao

46
8

score 0 · Answer 2 · answered Jul 08 '16 at 05:08

You need to use type="button" for the button tag so that its not considered as the button submit which cause form action to execute

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function(){
        this.classList.toggle("active");
        this.nextElementSibling.classList.toggle("show");
  }
}

button.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}

button.accordion.active, button.accordion:hover {
    background-color: #ddd;
}

button.accordion:after {
    content: '\02795';
    font-size: 13px;
    color: #777;
    float: right;
    margin-left: 5px;
}

button.accordion.active:after {
    content: "\2796";
}

div.panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: 0.6s ease-in-out;
    opacity: 0;
}

div.panel.show {
    opacity: 1;
    max-height: 500px;
}

<form action="page2.html">

<button type="button" class="accordion">Section 1</button>
<div class="panel">
    Ch.1: <input type=checkbox id="ch1" ><br>
    Ch.1: <input type=checkbox id="ch1"><br>
    Ch.1: <input type=checkbox id="ch1"><br>
</div>

<button type="button" class="accordion">Section 2</button>
<div class="panel">
    Ch.1: <input type="checkbox" id="ch1"><br>
    Ch.1: <input type="checkbox" id="ch1"><br>
    Ch.1: <input type="checkbox" id="ch1"><br>
</div>
</form>

score 0 · Answer 3 · answered Jul 08 '16 at 05:36

You should mention action attribute for any of the buttons other wise if you perform any action it's going to redirect to the page you mention for action atrribute.

You can try like this for onsubmit.

     <form onsubmit="return yourFunctionNmae()">
           <input type="submit" value="Submit"/>
     </form>

Javascript:

     <script type="html/javascript">
          function yourFunctionName()
          {
                 //required action to be done here.
          }
     </script>

Why the Form action in html is automatically triggered?

3 Answers3