从 Django 表单获取动态表单值答案

【问题标题】：Get dynamic Form Value from Django Forms从 Django 表单获取动态表单值
【发布时间】：2021-09-04 02:10:43
【问题描述】：

我正在尝试通过 JavaScript 从表单字段的变化值中获取 totalPrice 值。

我的观点：

if request.method == "POST":
        if (not closed):
            form = BookingForm(request.POST)
            if form.is_valid():
                booking = form.save(commit=False)
                booking.author = user
                booking.hotelName = hotel.name
                booking.save()
                success = "Success!"
            else:
                return render(request, "hotels/hotel.html", {
                    "form": form
                })
        messages.info(request, success)
        return HttpResponseRedirect(reverse("hotel", args=(hotel.id,)))
    else:
        return render(request, "hotels/hotel.html", {
            "hotel": hotel,
            "closed": closed,
            "message": message,
            "form": BookingForm()
        })

我的 HTML + JS 代码：

{% if not closed %}
<div class="container login">
    <h2>Book Now!</h2>
    <form method="POST">
        {% csrf_token %}
        <div class="form-group">
            {{ form.as_p }}
        </div>
        <div class="form-group">
            <input type="submit" name="button" id="submit" value="Book">
        </div>
    </form>
</div>
{% endif %}

<script>
    let price = 0;

    const check = (id) => {
        if(document.querySelector(`#${id}`).checked) {
            price += 300;
            document.querySelector('#totalPrice').value = `${price}`;
        }
        if(!document.querySelector(`#${id}`).checked) {
            if (!price <= 0) {
                price -= 300;
                document.querySelector('#totalPrice').value = `${price}`;
            }
        }
    }

    document.addEventListener('DOMContentLoaded', function() {
        document.querySelector("#breakfast").addEventListener('click', () => check("breakfast"));
        document.querySelector("#dinner").addEventListener('click', () => check("dinner"));
    })
</script>

还有，我的表单（通过 ModelForm）：

class BookingForm(ModelForm):
    class Meta:
        model = Booking
        fields = ['includeBreakfast', 'includeDinner', 'totalPrice']
        labels = {
            'includeBreakfast': 'Include Breakfast',
            'includeDinner': 'Include Dinner',
            'totalPrice': 'Total Price (in USD)'
        }

    #Visual stuff

totalPrice 是模型中的FloatField，但是当我尝试从 POST 中检索此值时，它会产生None，但我希望它采用动态变化的值。

【问题讨论】：

你的 js 代码能用吗？
不是真的，它给出了一个错误，但我找到了解决方案。有关第一个答案 cmets 的更多信息

标签： javascript django django-models django-forms

【解决方案1】：

我之前关于${price} 的回答不正确。

如果您的 javascript 正确更新了 totalPrice 字段，您可能需要使用浏览器开发人员工具中的“网络”选项卡来确认该值正在被发布。

【讨论】：

javascript 是否正确更新了totalPrice 输入？当您提交表单时，它是否有效？如果是，将创建一个预订。如果不是，将返回一个错误。如果有错误，那是什么？
当我提交表单时，管理页面中的总价格为 0.00
您好，有更新。问题在于我禁用了 totalPrice 字段的输入字段。这似乎使动态变化的值不被提交。我将其更改为“只读”。这对我来说只是愚蠢的，无论如何谢谢你

【解决方案2】：

问题出在totalPrice 字段的小部件中。之前是这样的：

self.fields['totalPrice'].widget = TextInput(attrs={
            'id': 'totalPrice',
            'disabled': True, #<-- The issue
            'class': 'form-control',
        })

我应该设置readonly，而不是disabled。现在可以了。

之后：

self.fields['totalPrice'].widget = TextInput(attrs={
            'id': 'totalPrice',
            'readonly': 'readonly',
            'class': 'form-control',
        })

【讨论】：