首页 文章

无法从 modal/popover 设置 html 表单输入文件

提问于
浏览
0

我有一个 HTML 表单。对于图像文件输入,我有一个模式弹出来设置输入字段,但也允许用户裁剪。当我提交表单时,它表示输入字段为空。

这是嵌入模态的表单:

<form class="form-horizontal" role="form"  action="" method="post" enctype="multipart/form-data">
  {% csrf_token %}

  <h5>First Name</h5>
  <div class="form-group">
    {{ form.first_name|attr:"class:form-control"|attr:"placeholder:Enter Your First Name" }}
  </div>

  <h5>Profile Image (Square Image)</h5>
  <div class="form-group">
    <button data-toggle="tk-modal-demo" data-modal-options="slide-down" class="btn btn-primary">Upload</button>
  </div>

  {{ form.crop_coords }}

  <!-- Create the modal dynamically via Handlebars -->

  <script id="tk-modal-demo" type="text/x-handlebars-template">
    <div class="modal fade" >
      <div class="modal-dialog">
        <div class="v-cell">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
              <h4 class="modal-title">Upload Profile Image</h4>
            </div>
            <div class="modal-body container">
              <div class="max-width: 560px;">
                <div>      
                  <img style="max-width: 100%;" id="tempImg" src="{% static 'app/images/default-team-large.jpg' %}"/>

                  <h5>Profile Image (Square Image)</h5>
                  <div class="form-group">
                    <input id="id_profile_image2" type="file" name="pic" accept="image/*">
                  </div>
                </div>
              </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              <button type="button" class="btn btn-primary" data-dismiss="modal">Save</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </script>

  <div class="form-group margin-none">
    <div class="col-sm-offset-3 col-sm-9">
      <button type="submit" class="btn btn-sm btn-primary" href="nml-home.html"> Confirm User Changes<i class="fa fa-fw fa-arrow-right"></i></button>
    </div>
  </div>
</form>

为了测试,我单击 data-toggle 按钮弹出模态。然后打开 tk-modal-demo,它有一个文件上传。我上传了一个图像,然后单击 tk-modal-demo 中的保存按钮以关闭模态。然后我使用底部表单提交按钮提交表单。我的验证员说该字段是空的。

如何从模态中设置此必填表单字段并在我提交时填充它?

1 回答

  • 1

    可能是模态输入元素不是在<form>元素内创建的。提交时,不会将此容器外部的输入元素发送到服务器。

    您可以先查看浏览器的开发控制台实际传输的内容(在 Chrome 中为“网络”选项卡)。如果您的字段不存在,那么您可能需要编写一些 Javascript,以便:

    • 将模式内的输入元素的内容复制到表单中的隐藏字段,以便使用常规提交过程

    • 或者,劫持提交事件并手动撰写您要发送的字段

相关问题