Button type "submit" doesn't let bootstrap modal to open but type="button" doesn't fulfill my need. How to use AJAX to solve this? - django

Question

I have a web page in which there is an input field. And below is an edit button. When I enter some text in the input field and press the edit button, a modal pops up and there is an input field in it also. I want to pass the text from the first input field to the input field in the modal window.
But then a problem arises. The modal window only opens when the edit button has type="button". But this type="button" doesn't submit the text input to the backend when I click the edit button. It submits the text to the backend when I use button type="submit", but then the modal doesn't open because the page reloads.
I don't know how to use AJAX, how can this be done with AJAX?
Here's my HTML code:
<div class="container">
<div class="row manage-groups">
<div class="row g-0 login_form justify-content-center" id="contactForm" novalidate="novalidate">
<form method="POST">
{% csrf_token %}
<div class="col-md-12 form-group">
<input type="text" class="login-inpt" id="name" name="type-groups" placeholder="type in the group name">
</div>
<div class="row g-0 justify-content-center group-action">
<div class="col-sm-4 submit-group">
<div>
<button type="submit" data-bs-toggle="modal" data-bs-target="#ModalAddGroups"
class="button-box">Add</button>
</div>
</div>
<div class="col-sm-4 submit-group">
<button type="button" onclick="form_submit()" data-bs-toggle="modal" data-bs-target="#ModalEditGroups"
class="button-box">Edit</button>
</div>
<div class="col-sm-4 submit-group">
<button type="submit" data-bs-toggle="modal" data-bs-target="#ModalDeleteGroups"
class="button-box">Delete</button>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- Modal window for Edit button -->
<div class="modal fade" id="ModalEditGroups" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content edit-modal">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Edit Group</h5>
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body grid-container">
<input type="text" value="{{ group.group_name }}">
{{ group.group_name }}
{{ group }}
<table class="edit-groupLinks">
<thead>
<tr class="header">
<th>Links</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" value="www.google.com"></td>
<td><button type="button" class="delete" aria-label="Close">
<span aria-hidden="true">×</span>
</button></td>
</tr>
</tbody>
</table>
<button class="add-linkBTN"><i class="fa fa-plus" aria-hidden="true"></i></button>
</div>
<div class="modal-ftr">
<button type="submit" class="button-box" id="footer-btn">Save</button>
</div>
</div>
</div>
</div>
Views.py file:
def manageGroups(request):
form = GroupSorting()
group = request.POST.get('type-groups', False)
content = Groups.objects.filter(group_name__contains = group)
if request.method == "POST":
form = GroupSorting(request.POST)
if form.is_valid():
form.save()
else:
form = GroupSorting()
context = {'form': form, 'group': content}
return render(request, 'posts/manage-groups.html', context)