追加項目を表示 を押下するとpostしてしまう

2024年6月8日

<button> タグがフォーム内にあるため、ボタンが押されたときにフォームが自動的に送信されてしまいます。この問題を回避するために、type="button" を使用してボタンを単なるボタンとして識別させることができます。また、JavaScriptを使用してアコーディオンが開いたときだけフォームを送信するようにすることができます。以下が修正例です。

html
<form method="post" action="" enctype="multipart/form-data">
    {% csrf_token %}
    <div class="row">
        {% for parameter in parameters %}
            <div class="col-md-4">
                <div class="mb-3">
                    <label for="{{ parameter }}" class="form-label">{{ parameter }}</label>
                    <input type="text" class="form-control" id="{{ parameter }}" name="{{ parameter }}"
                           value="{{ request.POST.parameter }}">
                </div>
            </div>
            {% if forloop.counter|divisibleby:3 and not forloop.last %}
    </div>
    <div class="row">
            {% endif %}
        {% endfor %}
    </div>

    <!-- アコーディオン -->
    <div id="accordion">
        <div class="card">
            <div class="card-header" id="headingOne">
                <h5 class="mb-0">
                    <button class="btn btn-link" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne"
                            aria-expanded="true" aria-controls="collapseOne">
                        追加項目を表示
                    </button>
                </h5>
            </div>
            <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-bs-parent="#accordion">
                <div class="card-body">
                    {% for parameter in parameters|slice:"6:" %}
                        <div class="mb-3">
                            <label for="{{ parameter }}" class="form-label">{{ parameter }}</label>
                            <input type="text" class="form-control" id="{{ parameter }}" name="{{ parameter }}"
                                   value="{{ request.POST.parameter }}">
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>

    <!-- フォームの送信 -->
    <button type="submit" class="btn btn-primary" style="height: 60px;">調査開始</button>
</form>

この修正により、"追加項目を表示" ボタンが押されてもフォームが送信されなくなります。