时间戳

首页 > 解决方案 > 将表单数据传递给引导模式

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

问题描述

案子：

我的数据库中有一个表，其中每一行都包含一个 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 %}

标签： javascripthtmldjango-formsbootstrap-modal

解决方案

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

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

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

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

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

推荐阅读