Django订单表单提交失效、样式异常问题求助

1. 提交表单后订单未存入数据库 #

• 先查views.py的表单处理逻辑：
  • 必须判断请求方法为POST才处理提交，还要确保表单验证通过后正确创建订单并关联商品：

    if request.method == 'POST':
        form = OrderForm(request.POST)
        if form.is_valid():
            # 先不直接提交到数据库，先关联商品
            order = form.save(commit=False)
            # 从URL参数或session里拿当前商品实例，比如：
            product = Product.objects.get(id=request.GET.get('product_id'))
            order.product = product
            order.save()
            return redirect('order_success') # 重定向到成功页
    else:
        # GET请求时初始化表单，可预填商品信息
        product_id = request.GET.get('product_id')
        form = OrderForm(initial={'product': product_id})
    

  • 可以在视图里打印form.errors，或者在模板加{{ form.errors }}，看看是不是表单验证没通过。
  • 核对models.py的Order模型，确保手机号、邮箱、商品关联字段都正确定义，没有不必要的blank=True或null=True导致数据没存上：

    class Order(models.Model):
        phone = models.CharField(max_length=20)
        email = models.EmailField()
        product = models.ForeignKey(Product, on_delete=models.CASCADE)
        created_at = models.DateTimeField(auto_now_add=True)
    

2. 提交按钮显示“Поиск”而非“Купить” #

• 检查product_buy.html的表单代码：
  • 要是用{{ form.as_p }}自动生成表单，要么在forms.py里自定义提交按钮：

    from django import forms
    from .models import Order
    
    class OrderForm(forms.ModelForm):
        class Meta:
            model = Order
            fields = ['phone', 'email', 'product']
        
        def __init__(self, *args, **kwargs):
            super().__init__(*args, **kwargs)
            # 替换默认提交按钮文本
            self.fields['submit'] = forms.CharField(widget=forms.SubmitInput(attrs={'value': 'Купить'}))
    

  • 或者直接在模板里手动加提交按钮，跳过自动生成的：

    <form method="post">
        {% csrf_token %}
        {{ form.as_p }}
        <button type="submit">Купить</button>
    </form>
    

  • 排查下模板是不是继承了带搜索表单的父模板，导致搜索按钮被误渲染到当前表单区域，删掉无关的表单代码就行。

3. {{ form.as_p }}表单横向排列 #

• 这是CSS样式搞的鬼，查全局样式或者当前模板的CSS：
  • 看看是不是给form p或form input设了display: inline、float: left这类属性：

    /* 错误示例，会导致表单横向排列 */
    form p {
        display: inline;
        float: left;
        margin-right: 10px;
    }
    

  • 给当前表单加个独立类，重置样式：

    <form class="order-form" method="post">
        {% csrf_token %}
        {{ form.as_p }}
        <button type="submit">Купить</button>
    </form>
    

    .order-form p {
        display: block;
        float: none;
        margin: 10px 0;
    }
    .order-form input {
        display: block;
        width: 100%;
    }
    

  • 要是用了Bootstrap这类框架，可能是默认开了横向表单布局，改成form-group类或者调整框架自带的表单样式就行。

内容的提问来源于stack exchange，提问作者Глеб Гудалин