title: show price based on product selected in form box
body: <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="https://i.stack.imgur.com/fXBP0.png" rel="nofollow noreferrer"><img src="https://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>