将表单数据传递给引导模式

Question

案例：

我的数据库中有一个表，其中每一行都包含一个 form 类型的值，并且在行尾有一个保存按钮。

现在我想做的事情如下：

当我单击保存按钮时，必须打开一个模式弹出窗口，它应该显示单击保存按钮的行中存在的数据。

此外，模式将有两个按钮提交和取消。 如果我点击模型上的保存按钮，数据必须在后端发送（我使用 Django 作为后端）。

我该怎么做？

我们将不胜感激。

代码：

{% block content %}   

<table id ="devicetable" cellpadding="20%" style="width:100%">

    <thead>
        <tr>

            {% for column in columns %}

                <td>{{ column }}</td>

            {% endfor %}
          {% if type != "NReq" %}
            <td> Button </td>
          {% endif %}
        </tr>
    </thead>

{% for a in all %}

    <tr>
      <form action = {% url type %} method="POST">{% csrf_token %}

        {% for k in columns %}
              <td>{{ a|get_item:k }}<input type = "hidden" name = {{k}} value = "{{ a|get_item:k }}"></td>
        {% endfor %}
        {% if type != "NReq" %}
          <td> <button type="submit" class="btn btn-primary">{{type}}</button></td>
        {% endif %}

      </form>
      </tr>

{% endfor %}

</table>

{% endblock %}

Answer 1

您可以在单击保存按钮时处理表单的提交事件（参见onsubmit Event）。使用此事件调用您 (a) 的函数：

1. 打开模态
2. 循环遍历表单内的<input>标签并在模态中显示内容
3. 返回false，这样数据就不会发送到服务器了

现在，当模式打开时，处理按钮的事件并手动引发表单的提交事件。对于 jQuery，这可能看起来像这样 (b) - 未经测试：

• $("#submit").on("click", function() { $("#formId").submit(); });
• $("#cancel").on("click", function() { $("#modalId").close(); });

请注意：当您从模态(b)提交表单时，应插入一个全局变量，以免重复(a)的步骤。否则表单将永远不会被提交。