在 Django 的函数视图中处理多种形式的不同表单标签

Question

HTML：

<form method="POST" enctype="multipart/form-data" id="p_formUpload">
{% csrf_token %}
<fieldset class="form-group">
<p>
{ p_form|crispy }}
</p>
</fieldset>
</form>
<form method="POST" enctype="multipart/form-data" id="c_formUpload">
{% csrf_token %}
<fieldset class="form-group">
<p>
{{ c_form|crispy }}
</p>
</fieldset>
</form>

views.py：

def profile(request):
p_photos = ProfilePicture.objects.all()
c_photos = CoverPicture.objects.all()
if request.method == 'POST':
    p_form = ProfileUpdateForm(request.POST,
                                request.FILES,
                                instance=request.user.profilepicture)
    c_form = CoverUpdateForm(request.POST,
                             request.FILES,
                             instance=request.user.coverpicture)
    if p_form.is_valid():
        p_form.save()
        messages.success(request, f'Your account has been successfully updated!')
        return redirect('profile')
    if c_form.is_valid():
        c_form.save()
        messages.success(request, f'Your account has been successfully updated!')
        return redirect('profile')
else:
    p_form = ProfileUpdateForm(instance=request.user.profilepicture)
    c_form = CoverUpdateForm(instance=request.user.coverpicture)

context={
    'p_form' : p_form,
    'c_form' : c_form,
    'p_photos': p_photos,
    'c_photos': c_photos,
}
return render(request, 'user/profile.html',context)

Javascript

<script src="{% static 'user/js/jquery-3.1.1.min.js' %}"></script>
  <script src="{% static 'user/js/bootstrap.min.js' %}"></script>
  <script src="{% static 'user/js/cropper.min.js' %}"></script>
  <script>
      $(function () {
        $("#id_profile_image").change(function () {
        if (this.files && this.files[0]) {
          var reader = new FileReader();
          reader.onload = function (e) {
            $("#image").attr("src", e.target.result);
            $("#modalCrop").modal("show");
          }
          reader.readAsDataURL(this.files[0]);
        }
      });

      var $image = $("#image");
      var cropBoxData;
      var canvasData;
      $("#modalCrop").on("shown.bs.modal", function () {
        $image.cropper({
          viewMode: 1,
          aspectRatio: 1/1,
          minCropBoxWidth: 200,
          minCropBoxHeight: 200,
          ready: function () {
            $image.cropper("setCanvasData", canvasData);
            $image.cropper("setCropBoxData", cropBoxData);
          }
        });
      }).on("hidden.bs.modal", function () {
        cropBoxData = $image.cropper("getCropBoxData");
        canvasData = $image.cropper("getCanvasData");
        $image.cropper("destroy");
      });

      $(".js-zoom-in").click(function () {
        $image.cropper("zoom", 0.1);
      });

      $(".js-zoom-out").click(function () {
        $image.cropper("zoom", -0.1);
      });

      $(".js-crop-and-upload").click(function () {
        var cropData = $image.cropper("getData");
        $("#id_x").val(cropData["x"]);
        $("#id_y").val(cropData["y"]);
        $("#id_height").val(cropData["height"]);
        $("#id_width").val(cropData["width"]);
        $("#p_formUpload").submit();
      });

    });
    </script>
        <script>
      $(function () {
        $("#id_cover_image").change(function () {
        if (this.files && this.files[0]) {
          var reader = new FileReader();
          reader.onload = function (e) {
            $("#c-image").attr("src", e.target.result);
            $("#c-modalCrop").modal("show");
          }
          reader.readAsDataURL(this.files[0]);
        }
      });

      var $image = $("#c-image");
      var cropBoxData;
      var canvasData;
      $("#c-modalCrop").on("shown.bs.modal", function () {
        $image.cropper({
          viewMode: 1,
          aspectRatio: 11/4,
          minCropBoxWidth: 1100,
          minCropBoxHeight: 400,
          ready: function () {
            $image.cropper("setCanvasData", canvasData);
            $image.cropper("setCropBoxData", cropBoxData);
          }
        });
      }).on("hidden.bs.modal", function () {
        cropBoxData = $image.cropper("getCropBoxData");
        canvasData = $image.cropper("getCanvasData");
        $image.cropper("destroy");
      });

      $(".c-js-zoom-in").click(function () {
        $image.cropper("zoom", 0.1);
      });

      $(".c-js-zoom-out").click(function () {
        $image.cropper("zoom", -0.1);
      });

      $(".c-js-crop-and-upload").click(function () {
        var cropData = $image.cropper("getData");
        $("#id_x").val(cropData["x"]);
        $("#id_y").val(cropData["y"]);
        $("#id_height").val(cropData["height"]);
        $("#id_width").val(cropData["width"]);
        $("#c_formUpload").submit();
      });

    });
    </script>

我试图在同一页面中同时使用不同的表单标签。但是我的第一个表单（p_form）正在提交数据，但第二个表单（c_form）不起作用。 我的问题看起来像views.py。 我试图找到很多解决方案有点找不到。 我通过 javascript 有多个提交按钮，并且在不同标签的同一页面中有两个表单。 项目中用于 django、crispy_forms、pillow 的模块。 我的完整代码可以在https://github.com/otakliquekirito/otaklique找到

Answer 1

试试这个

if request.method == 'POST':
    p_form = ProfileUpdateForm(request.POST,
                                request.FILES,
                                instance=request.user.profilepicture)
    c_form = CoverUpdateForm(request.POST,
                             request.FILES,
                             instance=request.user.coverpicture)
    if p_form.is_valid() and c_form.is_valid():
        p_form.save()
        c_form.save()
        messages.success(request, f'Your account has been successfully updated!')
        return redirect('profile') 
    elif p_form.is_valid():
        pass
    elif c_form.is_valid():
        pass