Не совсем корректно работает ajax

<script>
 output='';

$('#post-form').on('submit',function(e){
event.preventDefault();
var self = this;
let _tlt=$("#idtitle").val();

let csr=$("input[name=csrfmiddlewaretoken]").val();
console.log($(this).attr('action'))
mydata={
title:_tlt,
csrfmiddlewaretoken:csr,
}

$.ajax({
url:$(this).attr('action'),
method:"POST",
data:mydata,
dataType:"json",

success:function(data){
    x=data.unit_data;
    if (data.status=='Save'){
    for(i=0;i<x.length;i++){
    output +='<tr><td class="align-middle" style="width:960px;">'+ x[i].title+'</td>'+
    '<td class="text-center align-middle">'+'<input data-sid="{{item.pk}}" value="Update" type="image" src="../static/images/update.png" style="width:25px;">'+'</td>'
    +
    '<td class="text-center align-middle">'+'<input data-sid="{{item.pk}}" data-del="SprDelete" class="btn-del" value="Delete" type="image" src="../static/images/del.png" style="width:28px;">'+'</td></tr>'
    }

    $('#tbody').html(output)
    output='';
    $("form")[0].reset();
    //location.reload();
    }
    if (data.status == 0){
    alert('Запись не добавлена. Возможно, такая уже есть в справочнике...');
    }
}
});
}
);
///////////////////////////////////////////////////////////////////////////////
/////////////////////////////Delete SPR
$('#tbody').on('click','.btn-del',function(){
let id=$(this).attr('data-sid');
alert(id);
let pth='/'+$(this).attr('data-del')+'/';
let csr=$("input[name=csrfmiddlewaretoken]").val();

mydata={sid:id, csrfmiddlewaretoken:csr,};
mythis=$(this);
$.ajax({
url:pth,
method:'POST',
data:mydata,
success:function(data){
if(data.status =='Del'){
$(mythis).closest("tr").fadeOut();

}

if(data.status ==0){
console.log('NO');
}
},
});

});

</script>

Рекомендуем хостинг TIMEWEB

Стабильный хостинг, на котором располагается социальная сеть EVILEG. Для проектов на Django рекомендуем VDS хостинг.

И если после добавления посмотреть код страницы, то там ничего не изменится. Меняется только после обновления страницы... Может, в этом причина? Что тут можно сделать? Спасибо!

<table class="table shadow table-bordered">
<tbody id="tbody">

<tr>
<td style="width:960px; " class="align-middle">Новая</td>

<td class="text-center align-middle" ><input data-sid="219"  value="Update" type="image" src="/static/images/update.png" width="25px" > </td>
<td class="text-center align-middle" ><input data-sid="219" data-del="SprDelete" class="btn-del " value="Delete" type="image" src="/static/images/del.png" width="28px"> </td>
</tr>

<tr>
<td style="width:960px; " class="align-middle">Новая запись</td>

<td class="text-center align-middle" ><input data-sid="218"  value="Update" type="image" src="/static/images/update.png" width="25px" > </td>
<td class="text-center align-middle" ><input data-sid="218" data-del="SprDelete" class="btn-del " value="Delete" type="image" src="/static/images/del.png" width="28px"> </td>
</tr>

<tr>
<td style="width:960px; " class="align-middle">кг</td>

<td class="text-center align-middle" ><input data-sid="53"  value="Update" type="image" src="/static/images/update.png" width="25px" > </td>
<td class="text-center align-middle" ><input data-sid="53" data-del="SprDelete" class="btn-del " value="Delete" type="image" src="/static/images/del.png" width="28px"> </td>
</tr>

<tr>
<td style="width:960px; " class="align-middle">л.</td>

<td class="text-center align-middle" ><input data-sid="49"  value="Update" type="image" src="/static/images/update.png" width="25px" > </td>
<td class="text-center align-middle" ><input data-sid="49" data-del="SprDelete" class="btn-del " value="Delete" type="image" src="/static/images/del.png" width="28px"> </td>
</tr>

<tr>
<td style="width:960px; " class="align-middle">м</td>

<td class="text-center align-middle" ><input data-sid="2"  value="Update" type="image" src="/static/images/update.png" width="25px" > </td>
<td class="text-center align-middle" ><input data-sid="2" data-del="SprDelete" class="btn-del " value="Delete" type="image" src="/static/images/del.png" width="28px"> </td>
</tr>

Хотя ошибка скорее всего во view, вот что пишет:
ValueError: Field 'id' expected a number but got ''.
[25/Feb/2023 12:44:04] "POST /SprDelete/ HTTP/1.1" 500 121525
Понятно, id ждет число , а получает пустую строку. Но почему так? Вот сам view

#***********************//AJAX//**********************************************
# удаление единицы измерения
def SprDelete(request):
    if request.method == 'POST':
        id=request.POST.get('sid')
        print(id)
        pi=Unit.objects.get(pk=id)
        pi.delete()
        return JsonResponse({'status':'Del',})
    else:
        return JsonResponse({'status':0,})

Если просто открыть спраочник, то все отлично работает. Но если добавить, а потом попробовать что-то удалить, то вот эта ошибка, пустая строка в id..

если добавить в JavaScript location.reload () - все будет работать. но зачем мне перезагружать страницу? ч от этого и хочу уйти:(

Вопрос закрыт. Разобрался..

Всё логично. Ты полностью стираешь форму делая form[0].reset() и она становится пустой. То есть данных никаких нет.

А всё, разобрался...