Почему кнопка отправки ввода формы не отправляет запрос, если я использую функцию jquery, которая отключает кнопку после нажатия в Chrome?

Question

У меня есть приложение Flask, одна из страниц которого имеет форму, которая отправляет запрос формы, когда я нажимаю кнопку ввода ввода, я хочу, чтобы кнопка ввода была отключена после щелчка. Для этого я написал функцию jquery и прикрепил ее к элементу ввода.

В браузере Edge все работает отлично, но когда я выполняю тестирование в Chrome, кнопка отключается, а отправлять запрос неотправлено на сервер.

jquery скрипт, который показывает загрузку gif и блокирует кнопку ввода ввода:

function loading() {
  if ($('#calendar1').val() && $('#calendar2').val()) {
    $("#loading").show();
    $("#content").hide();
    $(':input[type="submit"]').prop('disabled', true);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" class="ordinary_form" id="wifi_form">
  <label for="calendar1"> Choose time period start: </label>
  <input type="date" name="calendar1" id="calendar1" required> <br> <br>
  <label for="calendar2"> Choose time period end: </label>
  <input type="date" name="calendar2" id="calendar2" required></p>
  <label for="period"> Choose step: </label>
  <select required name="period" id="period">
    <option selected value="0">Day</option>
    <option value="1">Week</option>
    <option value="2">Month</option>
  </select>
  <br><br>
  <input target="_self" type="submit" value="Send" formtarget="{{url_for('wifi')}}" formmethod="post" onclick="loading();">
</form>

Python-код (думаю, он вам не нужен, но пусть он будет здесь):

@app.route("/wifi", methods=["GET", "POST"])
@flask_login.login_required
def wifi():
    # something here
        if request.method == 'POST':
            start_date = request.form["calendar1"]
            end_date = request.form["calendar2"]
            period = request.form["period"]
            # do some work
    return render_template("wifi.html", result_dict=result_dict, wifipic="wifi" + pic_end)

Answer 1

Поскольку вы можете сделать это только в событии отправки

Отключение самой кнопки по нажатию кнопки остановит отправку формы

Также кажется, что ваш formtarget="{{url_for('wifi')}}" formmethod="post" долженудалить. Нет необходимости устанавливать это, когда у вас уже есть форма

. В любом случае, formtarget не является URL-адресом - вы могли иметь в виду formaction

$("#wifi_form").on("submit",function() {
    if ($('#calendar1').val() && $('#calendar2').val()) {
      $("#loading").show();
      $("#content").hide();
      $(':input[type="submit"]').prop('disabled', true);
    }
  })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" action="{{url_for('wifi')}}" class="ordinary_form" id="wifi_form">
  <label for="calendar1"> Choose time period start: </label>
  <input type="date" name="calendar1" id="calendar1" required> <br> <br>
  <label for="calendar2"> Choose time period end: </label>
  <input type="date" name="calendar2" id="calendar2" required></p>
  <label for="period"> Choose step: </label>
  <select required name="period" id="period">
    <option selected value="0">Day</option>
    <option value="1">Week</option>
    <option value="2">Month</option>
  </select>
  <br><br>
  <input type="submit" value="Send" >
</form>