使用mPDF生成PDF时显示加载图像

Question

I have a form to submit name of exam and mark range to generate a PDF with name of student, mark and rank. The form values for posted to another script which is used to generate a PDF using mPDF. Since there are many records it is taking sometime to generate PDF.

The form calling the script is as below:

<form class="form-horizontal form-validation" role="form" method="POST" action="generatePDF.php">
       <input type="text" name="examid" required />
       <input type="text" name="markmin" requried />
       <input type="text" name="markmax" required />
       <input type="submit" name="submit" value="Submit" />
</form>

I want to know if I can display a loading image while the script is running, called from the POST.

Answer 1

There are two options: replace the submit button with a generic spinner (e.g. font awsome) or, full page modal with a spinner. Both of these options will require javascript listeners on the form submit.

Replace Submit Button

(function($) {
  $('form').on('submit', function(e) {
    e.preventDefault(); //remove this line. Only included for demo purposes.
    $(this).find('[name="submit"]').replaceWith('<i class="fa fa-spinner fa-spin"></i>');
  });
})(jQuery)

<link href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form class="form-horizontal form-validation" role="form" method="POST" action="generatePDF.php">
  <input type="text" name="examid" required />
  <input type="text" name="markmin" requried />
  <input type="text" name="markmax" required />
  <input type="submit" name="submit" value="Submit" />
</form>

Modal Popup

(function($) {
  $('form').on('submit', function(e) {
    e.preventDefault(); //remove this line. Only included for demo purposes.
  });
})(jQuery)

.modal.show .modal-dialog.modal-dialog {
  width: 25vw;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}

.modal .modal-content {
  width: 25vw;
  font-size: 25vw;
  background: transparent;
  border: none;
  color: red;
}

<link href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />

<form class="form-horizontal form-validation" role="form" method="POST" action="generatePDF.php">
  <input type="text" name="examid" required />
  <input type="text" name="markmin" requried />
  <input type="text" name="markmax" required />
  <input type="submit" name="submit" value="Submit" data-toggle="modal" data-target="#exampleModal" />
</form>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <i class="fa fa-spinner fa-spin"></i>
      </div>
    </div>
  </div>
</div>

In both these cases, remove the e.preventDefault() line as this will stop the form from actually submitting.

The beauty of the modal option is you can replace the spinner (font awesome again) with any image you want.

</div>