title: How to fill a form field based on another field in Django template using Ajax+jQuery
body: <p>I am trying to populate the <strong>unit of measure</strong> field based on a <strong>product</strong> selected by the user using a dropdown. In my products model each product has been assigned a unit of measure and I am trying to autofill the unit field during order creation.</p>
  
  <p>I am using jQuery to pick up the product by and capturing the event <code>.on('change')</code>. In my endeavour to complete the scenario, I have tried to use this example code <a href="https://simpleisbetterthancomplex.com/tutorial/2016/08/29/how-to-work-with-ajax-request-with-django.html" rel="nofollow noreferrer">here</a> .</p>
  
  <p>In the example, we are checking if a particular name entered by a user exists or not using Ajax calls sent to the database, which I have been able to replicate. What I am unable to get around to, is picking up the related field value "<strong>unit of measure</strong>" on selection of a "<strong>product</strong>".</p>
  
  <p>What would be the correct way to send Ajax call to the database to pick up associated value of <strong>unit of measure</strong> based on selection of the <strong>product</strong>?</p>
  
  <p><strong>Edit</strong></p>
  
  <p><strong>models.py</strong></p>
  
  <pre><code>class Product(models.Model):
      product_id = models.IntegerField(primary_key=True, default=300000000000000000)
      description = models.CharField(max_length=100, help_text='Prod.Short text')
      default_uom = models.ForeignKey(Unit_of_Measure, null=True, on_delete=models.CASCADE, verbose_name='UoM')
  
      def __str__(self):
          return '{0} : {1}'.format(self.product_id, self.description)
  </code></pre>
  
  <p><strong>urls.py</strong></p>
  
  <pre><code>urlpatterns = [
  
      # ...
      path('ajax/uom/', fill_UoM, name='fill_unit_of_meas'),
      # ...
  </code></pre>
  
  <p><strong>Note:</strong> Initially I had included the url path in app root, now I have moved it to the project root.</p>
  
  <p><strong>Edit 2</strong></p>
  
  <p><strong>Note :</strong> <strong>views.py</strong> and HTML <strong>template</strong> have been modified and shown below (old code removed to make the reading easier).</p>
  
  <p><strong>1. Model: "Unit_of_Measure"</strong></p>
  
  <pre><code>class Unit_of_Measure(models.Model):
      uom = models.CharField(max_length=4, unique=True, help_text='Units of measure')
      uom_desc = models.CharField(max_length=50, null=True, help_text='Base UoM description')
  
      def __str__(self):
          return '{0} ({1})'.format(self.uom, self.uom_desc)
  </code></pre>
  
  <h2><strong>VIEWS.PY (Modified)</strong></h2>
  
  <pre><code>def fill_UoM(request):
      product_id = request.GET.get('product_id', None)
      data = {
          'default_uom': Product.objects.filter(product_id=product_id).values()
          }
      return JsonResponse(list(data), safe=False)     #   (data_serialized, safe=False)
  </code></pre>
  
  <h2><strong>HTML TEMPLATE (Modified)</strong></h2>
  
  <pre><code>function fillUoM() {
  // FUNC TO GET UNIT OF MEAS ON MATERIAL SELECTION AND UPDATE THE UoM FIELD
      console.log('**** FUNCTION ENTERED ON MATERIAL SELECTION NAME OF FUNC: ' + 'fillUoM');
      $.ajax({
          url: '{% url 'fill_unit_of_meas' %}',
          data: {product_id: matl_sel},       //  "matl_sel": SELECTED PRODUCT ID PASSED &gt;&gt; jQuery ".on('Change')"
          dataType: 'json',
          success: function(data) {       //  error
              console.log('The value captured is: ' + data)
          },
          error: function(data) {
              console.log('Data could not be retrieved: ' + data)
          }
      });
  };
  </code></pre>
  
  <p>And now I am not getting any errors but no result being returned as well. BTW, out of desperation and to test if the code (<strong>views.py</strong>) is working, I tried to return the value of product id, but of course it is not working.</p>
  
  <p>This is the <strong>console.log</strong>:</p>
  
  <blockquote>
    <p>The value captured is: mat_default_uom</p>
  </blockquote>
  
  <p><strong>Thanks</strong></p>