用户点击另一个按钮后触发点击一个按钮 jquery 和 flask

Question

我试图在用户点击下一步后触发点击模式中的提交按钮（我最终会隐藏），如下图所示：

我已经尝试实施一个 jquery 解决方案，我认为它应该可以工作，但它没有，而且我无法弄清楚为什么。 该代码不会触发提交按钮的点击。 我知道 jquery 正在工作和安装，因为我能够在我的 HTML 中使用其他脚本。任何关于如何在用户点击下一步（“Weiter”）后点击提交按钮的帮助或指示都会非常有帮助。 这是我的 HTML（使用 bootstrap 5 作为模态）：

<div class="modal fade" id="Modal_1_Toggle" aria-hidden="true" aria-labelledby="Modal_1_ToggleLabel" tabindex="-1">
                    <div class="modal-dialog modal-dialog-centered">
                      <div class="modal-content">
                        <div class="modal-header">
                          <h5 class="modal-title" id="Modal_1_ToggleLabel">Stufe 1</h5>
                          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <form method="POST" enctype="multipart/form-data">
                                {{ form_1.csrf_token }}
                                <p>
                                    {{ form_1.optimise_option.label(class="form-label") }}
                                    {{ form_1.optimise_option(class="form-select form-select-sm") }}
                                </p>
                                {{ form_1.submit(class="btn btn-primary", id="form_1_submit") }}
                                <p id="test">This is some random text</p>
                            </form>
                        </div>
                        <div class="modal-footer">
                          <button class="btn btn-primary" data-bs-target="#Modal_2_Toggle" data-bs-toggle="modal" data-bs-dismiss="modal" id="modal_1_confirm">Weiter</button>
                          <script src="{{ url_for('static', filename='js/scripts.js') }}"></script>
                        </div>
                      </div>
                    </div>
                  </div>

这是我在 js/scripts.js 文件夹中找到的 javascript：

$('#modal_1_confirm').click(function(){
    $("#form_1_submit").click();
})

编辑

根据答案，我可以通过修改主按钮 HTML 来触发提交按钮，如下所示：

<button class="btn btn-primary" data-bs-target="#Modal_2_Toggle" data-bs-toggle="modal" data-bs-dismiss="modal" id="modal_1_confirm" form="form_1">Weiter</button>

但是，现在的问题是，虽然我可以在服务器端收集表单数据，但在单击“weiter”后，模态不再移动到下一个。 这是使用data-bs-target="#Modal_2_Toggle" data-bs-toggle="modal"完成的。

Answer 1

不需要 JavaScript 来使表单外部的按钮充当该表单的提交按钮。
在按钮元素上使用form 属性。 <button type="button" form="#yourFormID"

Answer 2

您可以尝试以下代码：

<div class="modal fade" id="Modal_1_Toggle" aria-hidden="true" aria-labelledby="Modal_1_ToggleLabel" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">

      <form method="POST" enctype="multipart/form-data">
        <div class="modal-header">
          <h5 class="modal-title" id="Modal_1_ToggleLabel">Stufe 1</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">

          {{ form_1.csrf_token }}
          <p>
            {{ form_1.optimise_option.label(class="form-label") }}
            {{ form_1.optimise_option(class="form-select form-select-sm") }}
          </p>

          <p id="test">This is some random text</p>

        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-primary" data-bs-target="#Modal_2_Toggle" data-bs-toggle="modal"
            data-bs-dismiss="modal" id="modal_1_confirm">Weiter</button>
        </div>

      </form>
    </div>
  </div>
</div>