Show HTML popup before submitting form

Question

I have a simple POST form of the phone number, I want to show an HTML code before submitting the form. Here is my HTML code

<form method="post" action="verificacion/index.php" id='panel-form-post'>
    <input type="tel" id="phonenumber" name="phonenumber" autocomplete="off" onkeypress="return isNumberKey(event)" required>
    <span id="error_message" class="hide"></span>
    <button type="submit" name="panel-btn" id="panel-btn">SUBMIT</button>
</form>

I want to run a jQuery function before redirecting to 'verificacion' page. Thanks in advance.

Answer 1

As described in your comment, you probably want to control your code and decide when the post should be submitted. If so, you could work with promises.

document.getElementById('panel-form-post').addEventListener('submit', (e) => { // Event listener for submit
  e.preventDefault(); // Do not sent a response
  
  const promise = new Promise((resolve, reject) => { // Create a promise
    // You code
    console.info('Wait...')
    setTimeout(() => {
      resolve('OK');
    }, 3000);
  });
  
  promise.then((resolve) => { // Wait for promise
    console.log(resolve); // Output: "OK"
    e.target.submit(); // Resubmit the form
  })
  
});

<form method="post" action="" id='panel-form-post'>
  <input type="tel" required>
  <button type="submit">SUBMIT</button>
</form>

Answer 2

You can surelly find the solution to this with a simple search, but anyways.. You can javascript, using the "onclick" event on your submit button, this way, when you click the button, it will fire the function inside the "onclick" event. Example:

<button type="submit" name="panel-btn" onclick="testFunction()" id="panel-btn">SUBMIT</button>

<script>
    testFunction(){
        alert("You've submited the form");
    }
</script>