Django - 通用 UpdateView 以一种形式工作，但不能以其他形式工作

Question

I am working on a web application for my school project and I chose Django and all the tutorials found online were pretty comprehensive and I manage to get to some point to where I am stuck.

I have the following class based view trying to update an object:

views.py

class MyPostUpdateView(UpdateView):
    model = Post
    fields = ('VideoURL', 'MainDescription')
    template_name = 'myapp/editpost.html'

Then, I imported in my urls.py :

path('profile/account/my-posts/<int:pk>/edit/', MyPostUpdateView.as_view(),
     name='myapp-editpost')

Then, in my HTML template I have a several <form> elements but all belongs to the same <div> element:

<div class="row">
  <div class="col-12 col-lg-7">
    <form method='post' class="card shadow-soft border p-4 mb-4">
      {% csrf_token %}
      <h5 class="mb-4">Form1</h5>
      <div class="form-group">
        <label for="MainDescription">Titlu</label> {{form.MainDescription|add_class:"form-control shadow-soft"}}
      </div>
      <div class="row">
        <div class="col">
          <button class="btn btn-primary btn-dark mt-2 animate-up-2" type="submit">Update form
                                1</button>
        </div>
      </div>
    </form>
  </div>
  <div class="col-12 col-lg-5">
    <form method='post' class="card shadow-soft border p-4 mb-4">
      {% csrf_token %}
      <h5 class="mb-4">Form2</h5>
      <div class="form-group">
        <label for="VideoURL">Video URL:</label> {{form.VideoURL|add_class:"form-control shadow-soft"}}
      </div>
      <div class="row">
        <div class="col">
          <button class="btn btn-primary btn-dark mt-2 animate-up-2 text-right" type="submit">Update form 2</button>
        </div>
      </div>
    </form>
  </div>
</div>

The behavior is the following: I cannot update any of the two fields if I leave the HTML code as above. However, if I bring together the two fields, in the same <form> element, it works:

<div class="row">
  <div class="col-12 col-lg-7">
    <form method='post' class="card shadow-soft border p-4 mb-4">
      {% csrf_token %}
      <h5 class="mb-4">Form1</h5>
      <div class="form-group">
        <label for="VideoURL">Video URL:</label> {{form.VideoURL|add_class:"form-control shadow-soft"}}
      </div>
      <div class="form-group">
        <label for="MainDescription">Titlu</label> {{form.MainDescription|add_class:"form-control shadow-soft"}}
      </div>
      <div class="row">
        <div class="col">
          <button class="btn btn-primary btn-dark mt-2 animate-up-2" type="submit">Update form
                                1</button>
        </div>
      </div>
    </form>
  </div>
  <div class="col-12 col-lg-5">
    <form method='post' class="card shadow-soft border p-4 mb-4">
      {% csrf_token %}
      <h5 class="mb-4">Form2</h5>
      <div class="form-group">
        <label for="VideoURL">Video URL:</label> {{form.VideoURL|add_class:"form-control shadow-soft"}}
      </div>
      <div class="form-group">
        <label for="MainDescription">Titlu</label> {{form.MainDescription|add_class:"form-control shadow-soft"}}
      </div>
      <div class="row">
        <div class="col">
          <button class="btn btn-primary btn-dark mt-2 animate-up-2 text-right" type="submit">Update form 2</button>
        </div>
      </div>
    </form>
  </div>
</div>

Could anyone explain it to me? I am asking because I want to extend the UpdateView functionality to other fields belonging to the same model. Thanks!

Answer 1

In your first block of code, you have put the two fields into two different forms. When you are submitting the form, only the one which was submitted is taken.

So it is like placing 2 apples in the first bucket and 2 oranges in the second bucket.

Imagine you have changed the number of apples and oranges to 1 and 1. Am asking you to bring only one bucket(you can only bring one bucket). What happens? Number of apples is 1, but I have no idea whether you have changed the number of oranges in the second bucket.

Place the apples and oranges in one bucket so that when you bring me the bucket, I can clearly know how many apples and oranges were changed.

apples = content of videourl

oranges = maindescription

bucket = form