htmlのフォームアクションが自動的にトリガーされるのはなぜですか？

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

「セクション1」または「セクション2」をクリックしようとすると、ページは自動的にpage2.htmlにリダイレクトされます。なぜこうなった？同じコードで、 "onsubmit"にJavaスクリプト関数を追加するにはどうすればよいですか？htmlのフォームアクションが自動的にトリガーされるのはなぜですか？

出典

2016-07-08 user3888065

はをonSubmit = "return false;" を追加 ''しかし理由をIDK – Viney

formタグで – Viney

使用提出タイプとして考えformタグ内のすべてのボタン要素のでボタン

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

としてタイプ入力タグ。

ボタンと入力要素の詳細については、次のリンクを確認してください。そのがボタンとして考えられていないように

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

出典

2016-07-08 05:00:06

は、フォームのアクションを実行させた送信ボタンタグのtype="button"を使用する必要が

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>

出典

2016-07-08 05:08:16 bubesh

あなたが行動を言及する必要がありますあなたがアクションatrributeのために言及したページにリダイレクトしようとしているアクションを実行するならば、他のボタンの属性は他にも賢明です。

あなたは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>

出典

2016-07-08 05:36:47

htmlのフォームアクションが自動的にトリガーされるのはなぜですか？

答えて

関連する問題