I am submitting a form with several fields (columns) interacting with my database where I’m applying CRUD operations. Everything works as needed, except for an issue with the modal. There is a close button that uses data-dismiss=”modal”, which works fine, and a ‘Save Country’ button of type submit. When I click on ‘Save Country,’ it performs the necessary actions, but the modal doesn’t close automatically. If I add data-dismiss=”modal” to the ‘Save Country’ button, it prevents the form submission. Here’s my modal and the functionality for saving:

                <div class="modal-footer">
                    <button class="btn btn-warning btn-sm" data-dismiss="modal" aria-hidden="true"><i class="fa fa-ban"></i> Close</button>
                    <button class="btn btn-primary btn-sm" type="submit"><i class="fa fa-floppy-o"></i> Save Country</button> 
                </div>

        type: "POST",
        dataType: "json",
        beforeSend: function() {
            $("#countries-working").show(); // Show loading indicator
        },
        success: function(response) {
            if (response.valid) {
                refreshCountries(); // Refresh the DataTable
                $('#delete-confirmation-dialog').modal('hide'); // Hide the confirmation modal
                $("#countries-success").show(); // Show success message
                setTimeout(function() {
                    $("#countries-success").hide();
                }, 5000);
            } else {
                console.error('Delete failed: ' + response.msg);
            }
        },
        error: function(r) {
            console.error('Error during delete: ' + r.statusText);
        },
        complete: function() {
            $("#countries-dialog").modal('hide');
            $("#countries-working").hide(); // Hide loading indicator
        }
    });
});

i need a way to just have the modal close once i click on save country (while preserving the functionality of it).