show price based on product selected in form box
<p>I have a model of product and sale. A product contains a list of product with name, price and quantity where a sales model has product(Foreign key), quantity and price. There is a form for sale which shows list of products, quantity and price. Whenever a user selects for the product, the price field should show the price of that product and which should be uneditable. How can it be done?</p>

<p>My code</p>

<p><strong>Product</strong></p>

<pre><code>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
</code></pre>

<p><strong>product/forms.py</strong></p>

<pre><code>PRODUCT_QUANTITY_CHOICES = [(i, str(i)) for i in range(1, 21)]

class ProductForm(forms.ModelForm):
    class Meta:
        model = Product
        fields = '__all__'
</code></pre>

<p><strong>product/views.py</strong></p>

<pre><code>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})
</code></pre>

<p><strong>sales/models.py</strong></p>

<pre><code>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
</code></pre>

<p><strong>sales/forms.py</strong></p>

<pre><code>class SaleForm(forms.ModelForm):
    class Meta:
        model = Sale
        fields = '__all__'
</code></pre>

<p>In the image(sale form), i have selected the product shoe and its price is say $70, now after selecting the product shoe my price box should show $70 inside it. Likewise, if i selected the product football, the price box should show price of football. 
<a href="http://i.stack.imgur.com/fXBP0.png" rel="nofollow"><img src="http://i.stack.imgur.com/fXBP0.png" alt="enter image description here"></a></p>

<p><strong>UPDATE</strong></p>

<p><strong>sales/urls.py</strong></p>

<pre><code>url(r'^price/(?P&lt;pk&gt;\d+)$', views.fetch_price, name='fetch_price'),
</code></pre>

<p><strong>sales/views.py for ajax</strong></p>

<pre><code>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
</code></pre>

<p><strong>add_sale.html</strong></p>

<pre><code>&lt;script&gt;
        $('#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);
                }
            })
        });
    &lt;/script&gt;
</code></pre>

<p>This way i get 404 error</p>

<p>Try this to disable a form field.</p>

<pre><code>form = SaleForm()
form.fields['price'].widget.attrs['disabled'] = True
</code></pre>

<p>This just disable it in front end only. You have to o validations in backend form validation because, in frontend anyone can do disable to enable.</p>

python django django-models django-forms django-views