I have a form that passes parameters to another webpage that accesses a database and processes other php code. The processing takes up to 3 minutes. The form page stages on the screen until all processing of the database code is completed.

What I want to do is find some code for the form page that when the submit button is clicked, the code would show a spinner.gif (one of those ‘busy’ graphics) until the processing of the database is complete. When using the following code, the graphic is shown for a split second and then it goes to the database page but does not process anything.

<form method='post' action='email_active.php'  id ='frm1'   enctype='multipart/form-data'>
FORM CONTENT
   <button id='show-image' onClick='formSubmit(show())'>Send Data</button>
   <img id='my-image' src='../images/website/spinner.gif' style='display: none;'>
<script>
      const showImageButton = document.getElementById('show-image');
      const myImage = document.getElementById('my-image'); 
      showImageButton.addEventListener('click', () => { 
         myImage.style.display = 'block'; 
      });
</script>

If I use

<button type='submit' name='send' class='green2' onClick='formSubmit(show)'>showSend</button>

It skips to the database page but does not show the graphic or process the database code

If I use

<button type='submit' name='send' onClick='formSubmit()'>-- Send --</button>

the code will process but the graphic does not show.

What code do I need to popup the spinner graphic and then goes to the next page when process is complete?