Disable the button after click using a global selector - prevent form submission

Question

I have all kinds of buttons around the app. buttons that I want to have a spinner next to it ( to notify that something is going on ) - I add a specific class ajax_wait.

I catch them with $('.ajax_wait')

Problem is, when the selector catch buttons inside forms - the form will no longer submit. BUT, this behavior happens only in Chrome - in Firefox it will still submit ..

This is caused because of the .prop('disabled', true) - if I remove it - it works fine.

But I'm trying to find a solution still to make it work globally ( w/o binding submits etc .. ) as I'm not sure what else it will catch when the app grows.

Tried to place return true, tried many thing, nothing seems to work.

$(function() {
  $('.ajax_wait').on('click', function() {
    $(this)
      .prop('disabled', true)
      .attr('data-text', "Save")
      .html("saving please wait");
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Click this button first - see the JavaScript change: <br />
<button type="button" class="ajax_wait"> Generic button </button>

<br />
<br />
<form method='GET'>
  Click this button second in Chrome - it doesn't work <br /> Click this button second in Firefox - it works ?! <br />

  <button type="submit" class="ajax_wait"> Save </button>
</form>

Codepen: https://codepen.io/arlevi/pen/PoqdgEZ

As you can see, the buttons that I bind are not always inside a form, sometimes they do other stuff - but generally across the app every "ajax_wait" will place a msg for waiting ...

How can I make the form to submit together with the .prop('disabled', true) ?

@j08691 The solution you suggested as duplicate is similar, but the solution isn't what I"m looking for. I don't care about the form - it's just a side affect that I found. I can't bind submit - as not on all objects I have a form! also see that my issue is related to a browser specific, please release my post — Ricky Levi, Mar 23 '20 at 16:02
You need to change the button type `submit` to `button` and use ajax submit on click the button and in the ajax success you can disable the button. — Atiqul Alam, Mar 23 '20 at 16:03
@AtiqulAlam I can't, I don't know what the selector will catch - it's not applicable for every DOM scenario — Ricky Levi, Mar 23 '20 at 16:04
@j08691 by saying "duplicate" with another stackoverflow link - you did. and I've seen this post before I created my question — Ricky Levi, Mar 23 '20 at 16:05
@RickyLevi Where did I say anything was a duplicate? All I did was edit your question — j08691, Mar 23 '20 at 16:05
Then why my title have `Disable the button after click prevent form submission [duplicate]` ? and no one can comment on my question ? — Ricky Levi, Mar 23 '20 at 16:06
@mplungjan please reopen, binding the submit isn't what I"m looking for — Ricky Levi, Mar 23 '20 at 16:14

Disable the button after click using a global selector - prevent form submission

0 Answers0