Question

我有一张表格，用于提交考试名称和分数范围，以生成带有学生姓名，分数和等级的PDF。用于发布到另一个脚本的表单值，该脚本用于使用PDF生成mPDF。由于记录很多，因此生成PDF会花费一些时间。

调用脚本的形式如下：

<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>

我想知道在脚本运行时是否可以显示加载图像（从POST调用）。

Answer 1

有两个选项：用通用微调器（例如，令人讨厌的字体）替换“提交”按钮，或用微调器替换整页模式。这两个选项都需要表单提交中的javascript侦听器。

替换提交按钮

(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>

模式弹出窗口

(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>

在这两种情况下，请删除e.preventDefault()行，因为这将阻止表单实际提交。

模态选项的优点在于，您可以用任何想要的图像替换微调器（再次令人赞叹的字体）。

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

1 个答案:

替换提交按钮

模式弹出窗口