Jalaleddine Askari
Jalaleddine Askari

Reputation: 11

Show HTML popup before submitting form

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.

Upvotes: 1

Views: 259

Answers (2)

Reza Saadati
Reza Saadati

Reputation: 5419

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>

Upvotes: 1

EduardoK
EduardoK

Reputation: 122

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>

Upvotes: 0

Related Questions