Why is the form not sent when the data is entered correctly (javascript, ajax)?

There is a login form:

{% block content %}
  <form method="POST" class="login-form" id="login-form">
    {{ login_form.hidden_tag() }}
    <div class="form-group">
        {{ login_form.name.label }}
        {{ login_form.name(class="form-control", id="login_form_name", placeholder="Name") }}
    </div>
    <div class="form-group">
        {{ login_form.password.label }}
        {{ login_form.password(class="form-control", id="login_form_password", placeholder="Password") }}
        <p id="incorrect-data-error" class="error-message" style="margin-top: 30px;"></p>
    </div>
    <div class="form-group">
		{{ login_form.recaptcha.label }}
		{{ login_form.recaptcha(class="g-recaptcha") }}
		<p id="recaptcha-error" class="error-message" style="margin-top: 30px;"></p>
    </div>
    <div class="form-group">
        {{ login_form.submit(class="btn btn-primary", id="login-form-submit") }}
        <p id="session-exists-error" class="error-message" style="margin-top: 30px;"></p>
    </div>
  </form>
  <p class="register_account_message">Don't have an account? <a href="/signup">Signup here</a></p>
{% endblock %}

There is a js-script, which is associated with this form. It, using ajax, sends data from the form to the server after the Log In button is pressed:

$(document).ready(function() {

  $("#login-form").on("submit", function(event) {
    event.preventDefault();
    var formData = $(this).serialize();

    $.ajax({
      type: "POST",
      url: "/check_login_user_credentials",
      data: formData,
      success: function(response) {
        if (response.response === 'Incorrect data') {
          $("#incorrect-data-error").text('Incorrect username or password');
        } else if (response.response === 'Session already exists') {
          $("#session-exists-error").text('This account is already in use. Please try again later.');
        } else if (response.response === 'Allow') {
          $("#incorrect-data-error").text('');
          $("#login-form")[0].submit();
        }
      }
    });
  });
});

The route to which the data is sent:

@app1.route('/check_login_user_credentials', methods=['GET', 'POST'])
def check_login_user_credentials():
    hashed_password = sha256(request.form.get('password').encode('utf-8')).hexdigest()
    user = User.query.filter(User.name==request.form.get('name'), User.password==hashed_password).first()
    if user:
        if user.active_session:
            return jsonify({ 'response': 'Session already exists' })
        else:
            return jsonify({ 'response': 'Allow' })
            
    return jsonify({ 'response': 'Incorrect data' })

The thing is that when the data is incorrectly entered and/or the account has been logged in earlier, everything works as it should (the form is not sent and the corresponding messages appear). But, when the data is correct and no one has previously logged into the account, then there are no messages (as it should be), but the form is still NOT sent, although it should be. I just click the button and nothing happens, although the data is sent with ajax.

If anything, I use this version of jQuery:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

If anything, ChatGPT can't handle it) Any help and advice would be great.

As far as I understand it is most likely related to event.preventDefault();

You have to change your logic. You are preventing the normal submit to happen to instead make an AJAX call, and with the response of this call you decide if you do a normal submit.

The line below is going to force a submit, as there are no URL in the form tag, it's going to submit to your current page, that why you are getting back to the page when submiting, instead of this line, you want to redirect the user to the home page for example

$("#login-form")[0].submit();