Question

我有一个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>

要测试，我单击数据切换按钮以弹出模式。然后打开tk-modal-demo，上传文件。我上传了一张图片，然后点击了tk-modal-demo中的保存按钮来关闭模态。然后我使用底部表单提交按钮提交表单。我的验证员说该字段是空的。

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

Answer 1

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

您可以先查看浏览器的开发控制台实际传输的内容（在Chrome浏览器的“网络”标签中）。如果您的字段不在那里，那么您可能需要写一些Javascript，或者：

将模式内输入元素的内容复制到表单中的隐藏字段，以便使用常规提交过程
或者，劫持提交事件并手动撰写您要发送的字段

无法从modal / popover

1 个答案: