表单未保存对话框模式（弹出）Django 中的更改

Question

我是 Django 的新手。我正在尝试使用表单实现模态对话框。问题是，即使我对表单进行了一些更改，这些更改也没有显示在数据库中……我不知道为什么。当我在模态对话框外测试表单时，表单正在工作...... 这是我的 form.py:

class anomalie_location_form(ModelForm):
    class Meta:
        model = Anomalie
        fields = ['localization', ]

这是我的 view.py

@login_required(login_url='login')
def fix_anomalie_stock(request, pk, type_anomalie):

    anomalie_pk = Anomalie.objects.get(id=pk)

    # form to change anomalie position
    form_location = anomalie_location_form(instance=anomalie_pk)
    if request.method == 'POST':
        print('printinng anomalie_location_form POST ', request.POST)
        form_location = anomalie_location_form(
            request.POST, instance=anomalie_pk)
        if form_location.is_valid():
            form_location.save()
            return redirect('/')

    context = {'anomalie_pk': anomalie_pk,
                'form_location': form_location}

    return render(request, "anomalie/fix_anomalie_stock.html", context)

和我的 html:

<div class="modal fade" id="myModal2" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4>{{product.product_name }}</h4>
            </div>
            <form action="" method="POST">
                {% csrf_token %}
                <div class="modal-body">
                    {{form_location}}
                </div>
                <div class="modal-footer">
                    <input type="submit" class="btn btn-primary" value="Treter" data-dismiss="modal">
                </div>
            </form>
        </div>
    </div>
</div>

这是model.py

class Anomalie (models.Model):
    ANOMALIE = (
        ("Etiquette absente", "Etiquette absente"),
        ("Etiquette decalee", "Etiquette decalee"),
        ("Etiquette inconnue", "Etiquette inconnue"),
    )

    ANOMALIE_STATE = (
        ("traité", "traité"),
        ("mise à jour", "mise à jour"),
        ("signalé", "signalé"),


    )
    type = models.CharField(
        max_length=200, choices=ANOMALIE, null=False)
    date_report = models.DateTimeField(null=False, blank=False)

  
    localization = models.TextField(max_length=30, null=False, blank=False)
    state = models.CharField(
        max_length=200, choices=ANOMALIE_STATE, null=False)
  
    aisle = models.ForeignKey(Aisle, null=True, on_delete=models.SET_NULL)
    product = models.ForeignKey(
        Product, null=True, on_delete=models.SET_NULL)
   

    def datepublished(self):
        return self.date_report.strftime('%B %d %Y')

    def __str__(self):
        return self.type

这是 url.py

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', home_screen_view, name="home"),
    path('consult/<str:pk>/', consult_anomalie, name="consult_anomalie"),
    path('fix_anomalie_stock/<str:pk>/<str:type_anomalie>',
         fix_anomalie_stock, name="fix_anomalie_stock"),
   
]

所以问题是为什么表单在对话框模式之外工作？

Answer 1

我遗漏了一些细节，但当输入未命名时，表单通常无法正确提交。甚至 select 元素也需要名称和值对参数。你仔细检查了吗？

bootstrap 可能会发生的情况是模态框会混淆表单操作。您现在将其设置为 = ""。尝试删除 action 参数并为您的表单指定一个唯一 ID。

if request.method == 'POST':

也尝试检查是否发布了提交按钮，而不仅仅是请求方法。

Answer 2

模态框应该在表单标签内，而不是相反。

<form action="" method="POST">{% csrf_token %}

<div class="modal fade" id="myModal2" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4>{{product.product_name }}</h4>
            </div>
                <div class="modal-body">
                    {{form_location}}
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data dismiss="modal">Close</button>
                 <button type="submit" class="btn btn-primary">Save changes</button>
                </div>
        </div>
    </div>
</div>

</form>

Answer 3

错误很简单

也就是说，模态中的表单有一个提交按钮。此按钮具有 bootstrap 模态 data-dismiss 属性，这使得模态被关闭而不是表单被提交。

<input type="submit" class="btn btn-primary" value="Treter" data-dismiss="modal">

从提交按钮中删除 bootstrap data-dismiss 属性。

<input type="submit" class="btn btn-primary" value="Treter">

实际代码片段

运行代码片段以查看实际效果。我已经从问题中添加了模态代码。表单 submit() 用于提醒表单数据，而 'hidden.bs.modal' 用于在模式关闭时提醒。出于演示目的，表单有两个提交按钮。一个带有 data-dismiss 属性，另一个没有。可以看到按钮（2）提醒数据，而另一个关闭模态

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal2">
  Launch modal
</button>

<div class="modal fade" id="myModal2" role="dialog">
  <div class="modal-dialog modal-lg">
      <div class="modal-content">
          <div class="modal-header">
              <h4>Product Name</h4>
          </div>
          <form action="" method="POST">
              <div class="modal-body">
                  <input type="text" name="product" class="form-control">
                  (1) submit button with data-dismiss attribute<br>
                  (2) submit button without data-dismiss attribute
              </div>
              <div class="modal-footer">
                  <input type="submit" class="btn btn-primary" value="(1) Treter" data-dismiss="modal"> | <input type="submit" class="btn btn-primary" value="(2) Treter">
              </div>
          </form>
      </div>
  </div>
</div>
    
<script>
  $(document).ready(function() {
    console.log('start');
    $('form').submit(function() {
      alert($(this).serialize());
    })

    $('#myModal2').on('hidden.bs.modal', function (e) {
      alert('modal closes');
    })
  });
</script>

表单未保存对话框模式（弹出）Django 中的更改

form is not saving changes in dialog modal (popup) Django

forms

django

dialog

popup

bootstrap-4