How to submit form using jquery submit

Question

Here is my jquery code

$(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)
                }
            })
        })
    })
})

Here is my 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>

When the dropdown value changes, I want the form to submit and a django view triggered. This is my view

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)

The idea is that a plotly graph be displayed in bar_graph_container div when the dropdown value changes.

But I notice that this code $('#bar_graph_form_id').submit(function(event) { does not work. I removed the function from the submit as follows $('#bar_graph_form_id').submit() and this works fine.

I wonder what I am doing wrong.

Un-nest the function handling the submit, now it only triggers within the ```on('change')``` — Sander Bakker, Apr 10 '22 at 09:09
Does this answer your question? [jQuery AJAX submit form](https://stackoverflow.com/questions/1960240/jquery-ajax-submit-form) — Yogi, Apr 10 '22 at 09:17
@Yogi My issue comes with the dropdown change as well. I understand how to submit the form with ajax. I am not able to get it to work with the dropdown change — Sashaank, Apr 10 '22 at 09:18
At least read the question once before suggesting to close it — Sashaank, Apr 10 '22 at 09:22
Hello @Sashaank If your goal is to display graph on chenging select value then you don't have to submit your form you can handle all this thing in **change** event and no need of **POST** request if your trying to retrieve data from server. — Ankit Tiwari, Apr 10 '22 at 10:54
@AnkitTiwari how do I trigger the django view to run without submitting a form? — Sashaank, Apr 10 '22 at 11:19
Hello @Sashaank you've to call your ajax directly when user change select value and before sending ajax request you can validate if select contain value or not. — Ankit Tiwari, Apr 10 '22 at 11:22

score 1 · Accepted Answer · answered Apr 10 '22 at 11:40

Change you code like this

<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>

Inside your javascript add this

<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>

and inside your python file add this

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)

How to submit form using jquery submit

1 Answers1