How to auto populate a field in django when a value is selected from dropdown menu in another field in forms?

Question

I have two models that are located in two different apps; Invoice and Inventory.

InvoiceModel:

class Invoice(models.Model):
    line_one = models.ForeignKey(Inventory, to_field='title', on_delete=models.CASCADE, default='', blank=True, null=True, related_name='+', verbose_name="Line 1")
    line_one_unit_price = models.IntegerField('Unit Price(₹)', default=0, blank=True, null=True)
    line_one_quantity = models.IntegerField('Quantity', default=0, blank=True, null=True)
    line_one_total_price = models.IntegerField('Line Total', default=0, blank=True, null=True)

Invoice.line_one is referenced to Inventory.title

InventoryModel:

class Inventory(models.Model):
  product_number = models.IntegerField(blank=True, null=True)
  product = models.TextField(max_length=3000, default='', blank=True, null=True)
  title = models.CharField('Title', max_length=120, default='', blank=True, null=True, unique=True)
  amount = models.IntegerField('Unit Price', default=0, blank=True, null=True)

  def __str__(self):
      return self.title

So basically the user adds a product using the Inventory model and then in the Invoice model, they'll have a drop-down menu for line_one and when they click a certain item, I want the line_one_unit_price to get populated with the price of the item selected in the line_one option!

InvoiceForm:

class InvoiceForm(forms.ModelForm):
    line_one_unit_price = forms.CharField(widget=forms.Select, label="Unit Price(₹)")
    
    class Meta:
      model = Invoice
      fields = ['line_one',#...]
    
      def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.fields['line_one_unit_price'].widget.choices = [(i.amount, i.amount) for i in Inventory.objects.all()]

By using the above logic, I can list the amount of all products present in the Inventory but I want it to only display the amount of the product that the user has selected in line_one.

Screenshot:

In the image, the amount of the first product is automatically added but instead, I want it to be "-----" by default. How can I implement that? Thank you.

Answer 1

There's different ways you can do this, but essentially there's no built-in simple way. You need to employ JavaScript on the front-end to detect when that "Line 1" field changes and then fill in the "Unit Price" accordingly.

If you don't have too many "Line 1" items, one way of doing it is creating your own widget to embed the price in each <option> of the drop-down with a data- attribute. Then you include some JavaScript that detects when that drop-down has changed and updates the read-only "Unit Price" field. On the back-end, you should also make sure you don't use that form field and look-up the price based on the "Line 1" field.

Another option is to make an AJAX call to an endpoint to fetch the price.

EDIT: If there's multiple drop-downs with the same list of items, then having a global JS variable with a price look-up might work best (if not too large). Generate a look-up dict of product_number to amount (price), pass that to the template to output as JSON in a global variable, and then use that in your JavaScript to populate the "Unit Price".