【问题标题】:show price based on product selected in form box根据表格框中选择的产品显示价格
【发布时间】:2017-01-04 12:20:44
【问题描述】:

我有一个产品和销售模型。产品包含具有名称、价格和数量的产品列表,其中销售模型具有产品(外键)、数量和价格。有一个销售表格,显示产品清单、数量和价格。每当用户选择产品时,价格字段应显示该产品的价格,并且不可编辑。怎么办?

我的代码

产品

class Product(models.Model):
    name = models.CharField(max_length=120, blank=True, null=True, help_text="name of the product")
    quantity = models.PositiveIntegerField(default=1)
    price =  models.DecimalField(max_digits=10,decimal_places=2)

    def __str__(self):
        return self.name

product/forms.py

PRODUCT_QUANTITY_CHOICES = [(i, str(i)) for i in range(1, 21)]

class ProductForm(forms.ModelForm):
    class Meta:
        model = Product
        fields = '__all__'

product/views.py

def add_product(request):
    if request.method=='POST':
        form = ProductForm(request.POST or None)
        if form.is_valid():
            # product = form.save(commit=false)
            # product.save()
            name = form.cleaned_data['name']
            price = form.cleaned_data['price']
            quantity = form.cleaned_data['quantity']
            Product.objects.create(name=name, quantity=quantity, price=price)
            messages.success(request, 'Product is successfully added.')
            return redirect('/product/')
    else:
        form = ProductForm()
    return render(request, 'product/product_add.html', {'form':form})

sales/models.py

class Sale(models.Model):
    product = models.ForeignKey(Product)
    quantity = models.PositiveIntegerField(default=1)
    price =  models.DecimalField(max_digits=10,decimal_places=2)

    def __str__(self):
        return self.product.name

sales/forms.py

class SaleForm(forms.ModelForm):
    class Meta:
        model = Sale
        fields = '__all__'

在图片(销售表格)中,我选择了产品鞋,它的价格是 70 美元,现在在选择产品鞋后,我的价格框应该在里面显示 70 美元。同样,如果我选择产品足球,价格框应该显示足球的价格。

更新

sales/urls.py

url(r'^price/(?P<pk>\d+)$', views.fetch_price, name='fetch_price'),

用于 ajax 的 sales/views.py

def add_sale(request):
    if request.method=='POST':
        form = SaleForm(request.POST or None)
        form.fields['price'].widget.attrs['disabled']=True
        if form.is_valid():
            # product = form.save(commit=false)
            # product.save()
            product = form.cleaned_data['product']
            price = form.cleaned_data['price']
            quantity = form.cleaned_data['quantity']
            Sale.objects.create(product=product, quantity=quantity, price=price)
            messages.success(request, 'Product is successfully sold.')
            return redirect('/product/')
    else:
        form = SaleForm()
    return render(request, 'sale/add_sale.html', {'form':form})


def fetch_price(request, pk):
    product = get_object_or_404(Product, pk=pk)
    print('product',product)
    if request.method=='GET':
        response = HttpResponse('')
        price = product.price
        print('price',price)
        response['price-pk'] = product.pk
        response['price'] = price 
        return response

add_sale.html

<script>
        $('#id_product').on('change', function() {
            price_value = $(this).val();
            console.log(price_value);
            $.ajax({
                type:'GET',
                url:'/sale/price/'+price_value+"/",
                success: function(data){
                    console.log('price will be updated based on product selected');
                    $('#id_price').val(data.price);
                }
            })
        });
    </script>

这样我得到 404 错误

【问题讨论】:

  • 您可以添加列出产品的代码(views.py 和 HTML 模板)以供选择吗?
  • 对不起,我的脑子没有用,所以我写了一个错误的问题。我已经更新了它。等待我将使用模板更新代码。我已经发布了视图部分。
  • @SivasubramaniamArunachalam 我也用图像更新了我的问题。图像是销售形式。我希望根据所选产品在价格框中列出价格。
  • @Serenity 嗨,我知道这已经很老了,但我正在经历同样的问题。您介意分享 HTML 部分吗?这对我真的很有帮助。

标签: python django django-models django-forms django-views


【解决方案1】:

试试这个禁用表单域。

form = SaleForm()
form.fields['price'].widget.attrs['disabled'] = True

这只是在前端禁用它。您必须在后端表单验证中进行验证,因为在前端任何人都可以禁用以启用。

【讨论】:

  • 价格字段将如何填写所选产品的价格值?
  • 我想要基于所选产品的价格字段中的价格值。如图片所示,鞋子产品被选中,价值 70 美元。所以在提交之前价格字段应该显示 $70。
【解决方案2】:

您应该编写 javascript 代码来检测 product 字段的 onchange 事件。在onchange 事件处理程序中,您应该通过传递product_id 来触发对后端的AJAX 调用以获取所选产品的信息。通常,这是从urls.py 调用的另一个视图函数。一旦后端响应,AJAX 调用的回调应该更新price 字段。您可以考虑使用jQuery 而不是普通的javascript 来简化实现。

【讨论】:

  • 所以我应该使用 $.get 并根据我从所选产品中获得的 product_id 获取价格?
  • 是的。这应该是更简单的方法
  • 用“django ajax”搜索谷歌。你会得到很多例子。你能尽可能多地尝试吗?如果代码不起作用,您可以发布代码。
  • 在 sales/views.py 我添加了这个视图逻辑 def fetch_price(request, pk): product = get_object_or_404(Product, pk=pk) print('product',product) if request.method= ='GET': response = HttpResponse('') price = product.price print('price',price) response['price-pk'] = product.pk response['price'] = price return response now 怎么可以我将 pk 传递给 ajax 获取 url ?
  • 我获取了所选产品的正确 ID。我在终端中也得到了正确的产品实例和价格,我打印在 fetch_price 的视图中。但我收到 404 错误。
【解决方案3】:

不!

这会导致服务器请求太多只显示产品价格!

始终尽量减少请求以提高网站性能的最佳做法。

现在回答您关于获取价格的问题:

在您的 html 中,在产品 for 循环中,添加特殊标签以在选项中显示产品价格..

例如:

         {% for item in products %}
          <select class="products">
                <option price="{{ item.price }}">
                      {{ item.name }}
                </option>
           </select>
          {% endfor %}

现在最后一步是使用Javascript根据选择呈现产品价格!

    $(document).on("change", '.products', function (event) {
           event.preventDefault();
           $('#id_price').val($(this).children(":selected").attr("price"));
    });

在对服务器进行任何 ajax/请求之前,请始终考虑是否可以通过免费的 SQL 查询方法来完成。

【讨论】:

    猜你喜欢
    • 2017-05-04
    • 1970-01-01
    • 2022-12-14
    • 2018-07-17
    • 2014-04-15
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多