How do I send my updated data and save it using Bootstrap Modal in django?

Question

I am trying to use Boostrap Modal to pop up an edit form that should send the thought and its id to my views function using Ajax, edit, and save it. However, when I press the Save Changes button on my modal, nothing happens. Being very new to this, I can not figure out exactly where to go on the internet so it would be great for me if anyone here could direct me on what to read and what I'm doing wrong.

my html -

<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
     <div class="modal-content">
     <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLongTitle">Edit</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
          </button>
     </div>
     <div class="modal-body">
          <form method = "POST" enctype= multipart/form-data id = "editt">
              {% csrf_token %}
              <textarea id = 'thought' style="resize:none" type = "text" placeholder = "{{ obj.thought }}." rows = "5" cols = "40" name = "thought" required></textarea><br>
      </div><br>

      <div class="modal-footer">
      <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      <a type = "button" data-catid = "{{ obj.id  }}"><button type="button" class="btn btn-primary submit" id = "upload-form-btn">Save changes</button></a>

          </form>
      </div>
      </div>

    <script type="text/javascript"> 
         $('.submit').click(function(event) {
            var id = $(this).parent().attr("data-catid");
            var thought = $("#thought").val();
            alert(id + "datas  "+thought)
            event.preventDefault();
            $.ajax({
                type: "POST",
                url: 'edit',
                data: {
                    'thought': thought,
                    'id': id,
                    'csrfmiddlewaretoken': $("[name=csrfmiddlewaretoken]").val()
                },
                contentType: false, // add this to indicate 'multipart/form-data'
                success: function(response) {
                alert('Form Submitted');
                location.reload();
                },
                error: function(data) {
                //alert('Form submission failed');
                }
            });

            });

    </script>

my views.py's edit function:

   if request.method == "POST":
       thought = request.POST['thought']
       id = request.POST['id']
       thought_x = Thought.objects.get(pk = id)
       form = ThoughtForm(request.POST or None, instance = thought_x)
       if form.is_valid():
           form.save()

my urls.py:

urlpatterns = [ path('edit',views.edit, name = 'edit'),
]+ static(settings.STATIC_URL, document_root = settings.STATIC_ROOT) 

Models.py showing the model I am trying to update:

class Thought(models.Model):
    thought = models.CharField( max_length=300)
    done = models.BooleanField(default = False)
    date = models.DateTimeField(auto_now = True)
    manager = models.ForeignKey(User, on_delete =models.CASCADE, default = None)