Required field error happans only when using ajax - django

Question

I have a model named SaleEntry:
class SaleEntry(models.Model):
date = models.DateField()
ebay_price = models.FloatField()
amazon_price = models.FloatField()
ebay_tax = models.FloatField()
paypal_tax = models.FloatField()
tm_fee = models.FloatField(default=0.3)
promoted = models.FloatField(default=0.0)
profit = models.FloatField()
discount = models.FloatField(default=0)
country = models.CharField(max_length=100, default="-----")
user = models.ForeignKey(User, on_delete=models.CASCADE, default=0)
def save(self, *args, **kwargs):
if not self.pk: # object is being created, thus no primary key field yet
change_balance = Balance.objects.get(user=self.user)
change_balance.balance = change_balance.balance - self.amazon_price - self.tm_fee + self.discount
change_balance.save()
super(SaleEntry, self).save(*args, **kwargs)
def calc_profit(self):
return self.ebay_price - self.amazon_price - self.ebay_tax - self.paypal_tax - self.tm_fee - self.promoted + self.discount
def __str__(self):
return f'{self.user} - {self.profit}'
And I have a form handling this model SaleEntryForm:
class SaleEntryForm(ModelForm):
class Meta:
model = SaleEntry
fields = "__all__"
widgets = {
'date': DateInput(attrs={'class': 'form-control', 'id':'f_date'}),
'ebay_price': forms.NumberInput(attrs={'class': 'form-control', 'placeholder': 'eBay Price', 'id':'f_ebay_price', 'onkeyup': 'calc_profit()'}),
'amazon_price': forms.NumberInput(attrs={'class': 'form-control', 'placeholder': 'Amazon Price', 'id':'f_amazon_price', 'onkeyup': 'calc_profit()'}),
'ebay_tax': forms.NumberInput(attrs={'class': 'form-control col-1', 'placeholder': 'eBay Tax', 'id':'f_ebay_tax', 'onkeyup': 'calc_profit()'}),
'paypal_tax': forms.NumberInput(attrs={'class': 'form-control col-1', 'placeholder': 'Paypal Tax', 'id':'f_paypal_tax', 'onkeyup': 'calc_profit()'}),
'tm_fee': forms.NumberInput(attrs={'class': 'form-control col-1', 'placeholder': 'TM Fee', 'id':'f_tm_fee', 'onkeyup': 'calc_profit()'}),
'promoted': forms.NumberInput(attrs={'class': 'form-control col-1', 'placeholder': 'Promoted', 'id':'f_promoted', 'onkeyup': 'calc_profit()'}),
'profit': forms.NumberInput(attrs={'class': 'form-control', 'placeholder': 'Profit', 'readonly':'true', 'id':'f_profit'}),
'discount': forms.NumberInput(attrs={'class': 'form-control', 'placeholder': 'Discount', 'id':'f_discount'}),
'country': forms.TextInput(attrs={'class': 'form-control', 'placeholder': 'Country', 'id':'f_country'}),
}
def __init__(self, *args, **kwargs):
'''
relate the sale registration form to the user who created it.
'''
user_id = kwargs.pop('user_id')
super().__init__(*args, **kwargs)
self.fields['user'] = forms.ModelChoiceField(queryset=User.objects.filter(id=user_id), empty_label=None, initial=User.objects.get(id=user_id))
self.fields['user'].widget.attrs['class'] = 'no-display'
I am using this form in the html page:
<form id="form_add_sale">
{% csrf_token %}
<tr>
{% for field in form %}
{% if field is not form.user %}
<td>
{{ field }}
</td>
{% else %}
{{ field }}
{% endif %}
{% endfor %}
<td><input class="btn btn-primary" type="submit" display="inline" name="btn_register_sale"></td>
</tr>
</form>
and this is the ajax to send the data to server:
$(document).on("submit", '#form_add_sale', function(e){
e.preventDefault();
$.ajax({
url:"{% url 'add_sale' %}",
type:"POST",
data:{
date: $("#f_date").val(),
ebay_price: $("#f_ebay_price").val(),
amazon_price: $("#f_amazon_price").val(),
ebay_tax: $("#f_ebay_tax").val(),
paypal_tax: $("#f_paypal_tax").val(),
tm_fee: $("#f_tm_fee").val(),
promoted: $("#f_promoted").val(),
profit: $("#f_profit").val(),
discount: $("#f_discount").val(),
country: $("#f_country").val(),
},
success: function(){
alert("Created new sale!");
}
})
//.done(function(response){
// $("#table_sales").load(location.href + " #table_sales");
//})
.fail(function(xhr, status, error){
var err = eval("(" + xhr.responseText + ")");
alert(err.Message);
})
})
upon submitting the form, I'm getting the next error (which didn't occur when submitting the form regularly without ajax with the exact same code in the view):
<ul class="errorlist"><li>user<ul class="errorlist"><li>This field is required.</li></ul></li></ul>
this is the request.POST:
<QueryDict: {'date': ['2021-02-11'], 'ebay_price': ['70'], 'amazon_price': ['50'], 'ebay_tax': ['10'], 'paypal_tax': ['5'], 'tm_fee': ['0.3'], 'promoted': ['0.0'], 'profit': ['4.70'], 'discount': ['0'], 'country': ['-----']}>

Answer 1

I think you forgot the csrf_token. try adding:
csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val()
to the data.
More information can be found here