Как отправить форму с помощью jquery submit

Вот мой код jquery

$(document).ready(function () {
    $('.bar_dropdown').on('change', function() {
        console.log("dropdown changed")
        $('#bar_graph_form_id').submit(function(event) {
            event.preventDefault();
            var data = new FormData($('#bar_graph_form').get(0));

            $.ajax({
                url: $(this).attr('action'),
                type: $(this).attr('method'),
                data: data,
                cache: false,
                processData: false,
                contentType: false,

                success: function (data) {
                    console.log('form submitted successfully')
                    console.log(data)
                }
            })
        })
    })
})

Вот мой HTML

<form id="bar_graph_form_id" method="post" action="display_bar_graph" name="bar_graph_form">
    {% csrf_token %}
    <select class="form-select bar_dropdown" aria-label="Default select example" name="bar_graph_dropdown">
        <option selected>Select data to visualise</option>
        <option value="1">By category</option>
        <option value="2">By language</option>
    </select>
</form>

<div class="bar_graph_container">
</div>

Когда значение выпадающего списка изменяется, я хочу, чтобы форма отправлялась и запускалось представление django. Вот мое представление

def display_bar_graph(request):
    if request.method == 'POST':
        user_select = request.POST['bar_graph_dropdown']

        if int(user_select) == 1:
            graph = open('./graphs/bar1.html', 'r').read()
        
        if int(user_select) == 2:
            graph = open('./graphs/bar2.html', 'r').read()
        
        context = {'html_data': graph}
        
        print('the form was submitted using ajax')
        return JsonResponse(context)

Идея заключается в том, чтобы при изменении значения выпадающего списка в div bar_graph_container отображался плоский график.

Но я заметил, что этот код $('#bar_graph_form_id').submit(function(event) { не работает. Я удалил функцию из submit следующим образом $('#bar_graph_form_id').submit() и это работает нормально.

Интересно, что я делаю неправильно.

<select class="form-select bar_dropdown" aria-label="Default select example" name="bar_graph_dropdown">
        <option selected>Select data to visualise</option>
        <option value="1">By category</option>
        <option value="2">By language</option>
</select>

<script>
    $('.bar_dropdown').on('change', function () {
        $.ajax({
            type: "GET",
            url: '{% url "your_url" %}',
            data: {
                'bar_graph_dropdown': this.value
            },
            success: function (data) {
                console.log(data)
            },
            error: function (err) { 
                console.log(err)
            },
        });
    })
</script>

def display_bar_graph(request):
    user_select = request.GET.get('bar_graph_dropdown')
    if user_select:
        if int(user_select) is 1:
            graph = open('./graphs/bar1.html', 'r').read()

        if int(user_select) is 2:
            graph = open('./graphs/bar2.html', 'r').read()

    context = {'html_data': graph}
    print('the form was submitted using ajax')
    return JsonResponse(context)