在Django中，如何使選擇下拉選項自動提交表單？

Question

我正在嘗試實現一種表單，該表單根據另一個字段預先填充字段。 首先，我希望在從下拉菜單中選擇一個選項后，將表單設置為“自動提交”。 我嘗試了以下模板：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
    $(".auto-submit").change(function() {
        $(this).closest("form").submit();
    });
</script>


<form action="" method="post">{% csrf_token %}
    {% for field in form %}
        {% if field.name == "checkin_type" %}
            <div class="auto-submit">
                {{ field.errors }}
                {{ field.label_tag }}
                {{ field }}
            </div>
        {% else %}
            <div>
                {{ field.errors }}
                {{ field.label_tag }}
                {{ field }}
            </div>
        {% endif %}
    {% endfor %}
    <input type="submit" value="Send message" />
</form>

該視圖基於Django的通用CreateView ：

from django.views import generic
from .models import CheckIn


class CheckInCreate(generic.CreateView):
    model = CheckIn
    fields = '__all__'

和模型是

from django.db import models
from django.urls import reverse


class CheckInType(models.Model):
    title = models.CharField(blank=True, max_length=255)
    description = models.TextField(blank=True)

    def __str__(self):
        return self.title


class CheckIn(models.Model):
    checkin_type = models.ForeignKey(CheckInType, null=True, on_delete=models.CASCADE)
    title = models.CharField(blank=True, max_length=255)
    description = models.TextField(blank=True)

    notes = models.TextField(blank=True)

    # Scheduling
    requested_date = models.DateField(blank=True, null=True)
    completed_date = models.DateField(blank=True, null=True)

    def get_absolute_url(self):
        return reverse('checkin-detail', kwargs={'pk': self.id})

    def save(self, *args, **kwargs):
        if self.checkin_type:
            if not self.title:
                self.title = self.checkin_type.title
            if not self.description:
                self.description = self.checkin_type.description
        super().save(*args, **kwargs)

但是，如果我實際上在瀏覽器中選擇了一個下拉菜單選項，則什么也不會發生。 有人可以解釋為什么這行不通嗎？

Answer 1

您正在嘗試在下拉菜單加載到DOM之前附加事件處理程序。 您可以使用document.ready等待加載完成后附加處理程序

$(document).ready(function(){
    $(".auto-submit").change(function() {
        $(this).closest("form").submit();
        //this.form.submit(); //less verbose
    });
});