「新規追加」ボタンを押すとBootStrapのアコーディオンが一行だけ追加されるようにしたい

前提・実現したいこと

PHP(BootStrap)で日記のようなシステムを作っています。
行の「新規作成」ボタンを押したとき、Bootstrapのアコーディオンを一つ追加するような機能を作りたいと考えています。現在、「新規作成」ボタンを押したときに、正常通りに動くかどうか検証しているのですが、「新規作成」ボタンを押したときにphpのvar_dumpでメッセージを出力しようとしていますが、ボタンを押しても反応がありません。分かる方、よろしくお願いいたします。

該当のソースコード

<!doctype html>
<html lang="ja">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <title>みんなの日記帳</title>
  </head>
  <body>
    <h1>みんなの日記帳</h1>
    <!--ポストに"new_column"がある時にvar_dumpでデバックしたい-->
    <?php
    if (isset($_POST["new_column"])) {
        $kbn = htmlspecialchars($_POST["new_column"], ENT_QUOTES, "UTF-8");
    　　var_dump("成功です");
    }
    ?>
    <!--新規作成ボタンを右上に配置-->
    <button type="submit" method="post" name = "new_column" class="btn btn-primary">新規作成</button><hr>
    <!--アコーディオン処理-->
    <div id="accordion">
      <div class="card">
        <div class="card-header" id="headingOne">
          <h5 class="mb-0">
            <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
              Collapsible Group Item #1
            </button>
            <div class="float-right">
              <a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Delete</a>
            </div>
          </h5>
        </div>
        <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
          <div class="card-body">
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
          </div>
        </div>
      </div>
    </div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  </body>
</html>

試したこと

$_POST["new_column"]としてphpに渡し、phpのvar_dumpで処理させようとしています。

補足情報（FW/ツールのバージョンなど）

Brackets
MAMP
windows10

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

回答1件

ベストアンサー

<form>タグがないのでそもそも送信されません。

追記：
今ひとつやりたいことが見えませんが、<form>タグを入れたとしてもあくまで送信された状態の時のみvar_dump()が反応することになります。
「1行挿入したい」のであれば、JavaScriptでappendした方がいいように思います。
やりたいことをもう少し具体的に書いていただければ適切な対応策も提案できるのですが。

投稿2018/09/28 04:42

編集2018/09/28 04:45

m.ts10806

総合スコア80850

1004

2018/09/28 04:52

ご回答ありがとうございます。 formタグを入れたら、送信されるようになりました。具体的には、新規作成ボタンが押された時、BootStrapのaccordionが一つ追加されるように考えております。

m.ts10806

2018/09/28 04:52

JavaScriptでappendする内容だと思います。サーバーサイドを介する意味があまりありません。

1004

2018/09/28 05:00 編集

accordion内にテキストボックスを作り、ユーザーがその中に日記を書くようにします。日記のタイトルと内容を書いた後、DBにそれらのデータを保存して管理する予定です。また、新規作成の他に日記の削除もできるようにしたいと考えています。今回、JavaScriptの書き方が分からず、ｐｈｐを使ってしまいました。

m.ts10806

2018/09/28 05:00

なるほど。そのような前提や大目的があるのでしたら質問本文に記載しておいたほうが良いです。質問者さんがやりたいことと、適切な実現方法が一致しているとは限りませんので。

1004

2018/09/28 05:01

ありがとうございます。もっと詳しく書くように致します。

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