Flask Form Only Submitted in Desktop Browser and not Mobile Browser

Question

I have a Flask 2.x app that runs in Apache on a Pi Zero W. I have a button on a page and I am trying to capture a long press to submit a form. It all works when I access the site in a desktop browser (Chrome and Firefox), but not on my Android phone using mobile Chrome or mobile Firefox.

The way it is supposed to work is the code long_press.js detects a long press event on the form's submit button and changes a hidden field value in the form before it is submitted. The hidden value in the form tells the code on the server if the button was long pressed or not, and processes the input accordingly.

When I look at the Firefox console debugger output for long_press.js it works as expected in both the desktop browser and the mobile browser - e.g I get all the correct messages printed to the console. However, the post request is only sent in the desktop browser and not the mobile browser.

This is my html:

{% extends 'base_bootstrap.html' %}

{% block navbar %}
{% include 'navbar-2.html' %}
{% endblock %}

{% block content %}
<div class="container mt-3 pt-2 centered">
    <div class="d-flex h-100">
        <div class="m-auto">
            <div class="btn-group-vertical centered" role="group">
                
                <div class="btn-group px-5 mb-5">
                    <form method="get">
                        <button type="submit" class="{{ continuity_style }}" id="continuity" >{{ continuity_text }}</button>
                    </form>
                </div>
                
                <form method="post">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
                    <div class="btn-group mb-5 gap-5">
                        <button type="submit" class="btn btn-outline-primary  px-0" id="remove_key" name='armed' value='key_removed'>Remove Key</button>
                        <button type="submit" class="btn btn-primary px-12" id="launch" name='armed' value='launch'>Launch</button>
                        <input type="hidden" id="long_press" name="long_press" value="1111">
                    </div>
                 </form>
            </div>
        </div>
    </div>
</div>

</div>

<script src="{{url_for('static', filename='long_press.js')}}"></script>

{% endblock %}

{% block footer %}
{% include 'footer.html' %}
{% endblock %}

and the long_press.js code

// https://www.kirupa.com/html5/press_and_hold.htm
SHORT_PRESS_KEY = '1234';
LONG_PRESS_KEY = '3487';
// The launch_button (or launch_buttons) to press and hold on
let launch_button = document.querySelector("#launch");
let long_press = document.querySelector("#long_press");
long_press.value = SHORT_PRESS_KEY;

let timerID;
let counter = 0;

let pressHoldEvent = new CustomEvent("pressHold");

// Increase or decreae value to adjust how long
// one should keep pressing down before the pressHold
// event fires
let pressHoldDuration = 50;

// Listening for the mouse and touch events    
launch_button.addEventListener("mousedown", pressingDown, false);
launch_button.addEventListener("mouseup", notPressingDown, false);
launch_button.addEventListener("mouseleave", notPressingDown, false);

launch_button.addEventListener("touchstart", pressingDown, false);
launch_button.addEventListener("touchend", notPressingDown, false);

// Listening for our custom pressHold event
launch_button.addEventListener("pressHold", doSomething, false);

function pressingDown(e) {
  // Start the timer
  requestAnimationFrame(timer);

  e.preventDefault();

  console.log("Pressing!");
}

function notPressingDown(e) {
  // Stop the timer
  cancelAnimationFrame(timerID);
  counter = 0;

  console.log("Not pressing!");
}

//
// Runs at 60fps when you are pressing down
//
function timer() {
  console.log("Timer tick!");

  if (counter < pressHoldDuration) {
    timerID = requestAnimationFrame(timer);
    counter++;
  } else {
    console.log("Press threshold reached!");
    launch_button.dispatchEvent(pressHoldEvent);
  }
}

function doSomething(e) {
  console.log("pressHold event fired!");
  long_press.value = LONG_PRESS_KEY;
}

What am I missing?

Answer 1

The solution I found was to add let launch_form = document.querySelector("#launch_form"); to the top of long_press.js and add launch_form.submit() at the bottom of function doSomething(e). I guess the click events submit the form, but a long press does not.