入力フォームを閉じるとpostが飛んでしまう

「追加」ボタンを押すとポップアップのような形で画面中央に入力フォームが作成される仕組みを作っています。

入力したデータの送信は問題なくできているのですが、何も入力をせずに、右上の「閉じる」ボタンを押してフォームを非表示にした際にもPOSTが送信されてしまいます。

原因が全くわかりません。

どなたかお力を貸してください。

ソースは以下のようになります。

html
1<!--フォームを表示するボタン-->
2<button onClick="form_open();" type="button" class="btn">追加</button>
3
4<!--フォーム-->
5<div id="form" style="display: none;">
6 <form method="post" action="mc_detail.php?mc_id=<?php print $mc_id; ?>">
7  <h2>情報追加</h2>
8   <textarea name="data"></textarea>
9   <input type="submit" class="btn">
10   <button onClick="close();" class="btn">閉じる</button>
11 </form>
12</div>

Javascript
1function form_open(){
2 document.getElementById("form").style.display = "block";
3}
4
5function close(){
6 document.getElementById("form").style.display = "none";
7}

行動規範の内容に同意します

回答1件

ベストアンサー

type属性をつけましょう。

HTML
1<button type="button" onClick="close();" class="btn">閉じる</button>

【<button>: ボタン要素 | MDN】
https://developer.mozilla.org/ja/docs/Web/HTML/Element/button#attr-type

type

ボタンの種別。以下の値を指定可能です。

submit: 自身が属するフォームのデータをサーバーに送信するボタンとなります。これは type 属性が指定されていない場合、もしくは属性値が動的に空にされたり不正な値にされた場合の既定の動作です。
reset: ボタンに紐づけられたフォームコントロールの値をすべて初期値に戻すリセットボタンになります。
button: type 属性に button を指定したボタンには、既定の動作はなく、クリックするなどしても何も起こりません。クライアントサイドスクリプトで要素にイベントを設定することにより、操作時の挙動を設定することができます。

投稿2018/12/08 06:09