How to get multiple ajax functions to work correctly

I have a django template with two forms in it. When the first form is submitted, an ajax function is triggered and the second form is displayed on the page. When the second form is submitted, the ajax function linked to that form does not seem to work.

For testing purposes, I tried to submit the second form before submitting the first form, and the ajax function works as expected. How do I make multiple ajax functions work correctly one after the other?

This is my template

<div class="form_container">
    <div class="form">
        <form action="{% url 'process_url' %}" method="post" id="youtube_link_form">
            {% csrf_token %}
            <div class="input-group mb-3">
                <input type="text" class="form-control youtube_link_input"
                    placeholder="Put the youtube link or video id" aria-label="youtube_submit_input"
                    aria-describedby="youtube_submit_button" name="youtube_submit_input">
                <button class="btn youtube_submit_button" type="submit" id="youtube_submit_button">Submit</button>
            </div>
        </form>
    </div>
</div>

<div class="user_target_select">
    <div class="target_buttons d-flex justify-content-between">
        <form method="get" action="{% url 'user_select_positive' %}" id="positive_user_select_form">
            <input type="hidden" id="positive_user_select_input" name="positive_user_select_input">
            <button class="target_button btn btn-outline-success" id="user_select_positive" type="submit"
                data-bs-toggle="modal" data-bs-target="#thank_model">Positive</button>
        </form>
    </div>
</div>

Here, user_target_select div is hidden by default. When the first form is submitted, the div is displayed.

This is my js file

function youtube_link_form_submit(event) {
    event.preventDefault();
    var data = new FormData($('#youtube_link_form').get(0));

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

        success: function (data) {
            $('#status').append(data['status'])
            $('.user_target_select').css('display', 'block');

            if (data['status'] == 'video parsed successfully') {
                console.log('data submitted successfully')
            }
        }
    })

    return false;
}

function positive_user_select_form_submit(event) {
    event.preventDefault();
    var data = $(this).serialize();

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

        success: function (data) {
            console.log(data)
            $('.user_target_select').css('display', 'none');
        }
    })

    return false;
}

// trigger the above functions on form submit

$(function () {
    $('#youtube_link_form').submit(youtube_link_form_submit);
})

$(function () {
    $('#positive_user_select_form').submit(positive_user_select_form_submit);
})

Currently when the second form is submitted the ajax function is not called. I know this because the event.preventDefault() is not working and the JsonResponse from the django view is executed on a new page. The URL also changes. If I try to submit the second form without submitting the first form, the function works as expected.

Back to Top