I'm not sure how to word this because I don't know exactly what's happening.

Context: I am requiring the user's location upon clicking a "Deposit" button. I use js to get their location via navigator.geolocation.getCurrentPosition(). To signal to the user we are actively checking, I want to change the text to "Please wait...".

Problem: After changing that text with javascript, all is good. UP UNTIL it gets to the location function call. Then it resets the button back to "Deposit", and only that button. All other changes on the page via js persist.

Question: What's happening underneath the hood? How do I get around this?

Relevant HTML:

<div class="custom-amt col-md-3">
   <%= submit_tag 'Deposit', class: "red-btn form-control new-deposit-btn", data: {disable_with: " Please wait..." } %>
</div>

Relevant JS:

debugger; // up until this point, button text stays as "Please wait..." which is desired behavior
navigator.geolocation.getCurrentPosition(accessAllowed, handleError); // as soon as this location function is called, button text is reverted.