Django auto-populating form field from API call - django

Question

I am trying to auto-populate one field of a Django form based on the query response of an entry into another field. I would like to do so before the form is submitted, displaying the autopopulated value in the field and maintain the user's ability to edit.
(Example, I type 'a handful of bananas' into the name field, when that field blurs it queries the api and fills the carbs field with the # of carbs a handful of bananas has)
Right now I have the ajax function to query:
$('#recipe-query').on('blur', function(event){
event.preventDefault();
console.log("blur")
query_macros();
});
function query_macros(){
var dataStr = "APIKEYREDACTED"
var ingredParam = encodeURI($('#recipe-query').val())
dataStr = dataStr + ingredParam
if($('#recipe-query').val() && $('#should-query').val()){
$.ajax({
url: "https://api.edamam.com/api/nutrition-data",
data: dataStr,
type: "GET",
dataType: "json",
success : function(json){
console.log(json);
console.log(json.totalNutrients.CHOCDF.quantity)
$('#carbs-query').value = json.totalNutrients.CHOCDF.quantity;
},
error : function(xhr, errmsg, err){
console.log(xhr.status + ": " + xhr.responseText);
}
});
}
}
this is the form
class NutritionForm(forms.ModelForm):
class Meta:
model = Nutrition
fields = ('food_name', 'autofill_macros', 'grams_of_fat',
'grams_of_protein', 'grams_of_carbs', 'date')
widgets = {
'food_name': forms.TextInput(attrs={
'id': 'recipe-query'
}),
'autofill_macros': forms.CheckboxInput(attrs={
'id': 'should-query'
}),
'grams_of_fat': forms.TextInput(attrs={
'id': 'fat-query'
}),
'grams_of_protein': forms.TextInput(attrs={
'id': 'protein-query'
}),
'grams_of_carbs': forms.TextInput(attrs={
'id': 'carbs-query'
})
}
and model
class Nutrition(models.Model):
food_name = models.CharField(max_length=50)
autofill_macros = models.BooleanField()
grams_of_protein = models.PositiveSmallIntegerField()
grams_of_carbs = models.PositiveSmallIntegerField()
grams_of_fat = models.PositiveSmallIntegerField()
calories = models.PositiveSmallIntegerField()
date = models.DateField()
user = models.ForeignKey(User, on_delete=models.CASCADE)
but the #carbs-query field is not updated. How do I use the result of the API call to populate the other field while maintaining its editability (all before form submit).

Answer 1

It seems like js code have some issues. you can try below method of jQuery to set value:
$('#carbs-query').val(json.totalNutrients.CHOCDF.quantity);
Full code:
function query_macros(){
var dataStr = "APIKEYREDACTED"
var ingredParam = encodeURI($('#recipe-query').val())
dataStr = dataStr + ingredParam
if($('#recipe-query').val() && $('#should-query').val()){
$.ajax({
url: "https://api.edamam.com/api/nutrition-data",
data: dataStr,
type: "GET",
dataType: "json",
success : function(json){
console.log(json);
console.log(json.totalNutrients.CHOCDF.quantity)
$('#carbs-query').val(json.totalNutrients.CHOCDF.quantity);
},
error : function(xhr, errmsg, err){
console.log(xhr.status + ": " + xhr.responseText);
}
});
}
}