CODEWITHSUNDEEP
pythonjqueryhtmlgoogle-chromeflask
Artiom Kozyrev
Artiom Kozyrev

Reputation: 3826

Why Form input submit button does not send request if I use jquery function which disables button after click in Chrome?

I have Flask application, one of the pages has form whcih send form request when I click on Input Submit button, I would like the input button to be disabled after click. In order to do so, I've written jquery fucntion and attached it to input element.

Everything works perfectly in Edge browser, but when I do test in Chrome, the button becomes disabled, but post request is not sent to server.

jquery script which shows loading gif and blocks submit input button:

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 code (I guess you do not need it, but let it be here):

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

Upvotes: 0

Views: 40

Answers (1)

mplungjan
mplungjan

Reputation: 177786

Because you can only do that in the submit event

Disabling the button itself on click of the button will stop the form from being submitted

It also seems that your formtarget="{{url_for('wifi')}}" formmethod="post" should be removed. No need to set that when you have a form already

In any case formtarget is not a URL - you may have meant 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>

Upvotes: 1

Related Questions