时间戳

首页 > 解决方案 > 当用户未完成表单中的所有字段时如何为 onclick 加载程序创建条件

javascript - 当用户未完成表单中的所有字段时如何为 onclick 加载程序创建条件

问题描述

我的表格有问题，表格中有一些信息和要上传的照片。发送表格的时间根据文件的重量而有所不同，如果是〜3MB就可以，但是如果有人使用手机版，他们会使用手机中的相机，然后照片可能会重达7MB-然后加载时间太长，用户很困惑。因此，我在 onclick 上使用了一个简单的加载器，在下一页上使用了相同的 onload，效果很好，除非有人不填写表单中的字段，否则加载器会覆盖整个页面并永远转动。只有在所有字段都正确完成的情况下，如何才能使加载程序出现在 oncick 上？

有形式：

<div id="preloader" aria-busy="true" aria-label="Loading, please wait." role="progressbar"><img class="icon" src="https://raziraz.github.io/codepen/img/bolt.svg">
</div> 

    <main id="site" role="main">
    <script  src="./preloaderr.js"></script>

        <h2>Dodaj nową licencję</h2>
        <form method="POST" action="Licencja_Użytkownik_Dodawanie_Skrypt.php" enctype="multipart/form-data">
        <input type="hidden" name="login" value="$login">

        <div id="inputtitle">Prześlij zdjęcie</div>
        <input type="file" name="licencja_plik" required>
        </br>

        <div id="inputtitle">Numer licencji</div> 
        <input type="text" name="Numer_Licencji"  placeholder="Numer licencji" required></br>

        <div id="inputtitle">Numer wypisu</div> 
        <input type="text" name="Numer_Wypisu"  placeholder="Numer wypisu" required></br>

        <div id="inputtitle">Miasto</div> 
        <input type="text" name="Miasto_Licencji"  placeholder="Miasto" required></br>

        <div id="inputtitle">Numer rejestracyjny</div> 
        <input type="text" name="Numer_Rejestracyjny"  placeholder="Numer rejestracyjny" required></br>

        <div id="inputtitle">Licencja ważna do:</div> 
        <input type="date" name="Licencja_Do"  placeholder="05-02-2020" required></br>

        <div id="containera">
        <div id="right">

        <button type="submit" class="buttondodaj" onclick="teest(); window.parent.parent.scrollTo(0,0)">
        Dodaj&nbsp;&nbsp;&nbsp;<i class="fas fa-arrow-right"></i>
        </button>

        </form></div>

        <form method="GET" action="Licencja_Użytkownik.php" >
        <input type="hidden" name="login" value="$login">

        <div id="left">

        <button type="submit" class="buttonanuluj">
        <i class="fas fa-arrow-left"></i>&nbsp;&nbsp;&nbsp;Anuluj
        </button>

        </form>
        </div>
        </div>
    </main>

有js预加载器和加载器：


function preloader() {
  var preloader = document.getElementById("preloader");
  preloader.style.opacity = "0";
  preloader.setAttribute("aria-busy", "false");
  document.getElementById("site").style.opacity = "1";
}
window.onload = preloader;


function teest() {
  var preloader = document.getElementById("preloader");
  preloader.style.opacity = "1";
  preloader.setAttribute("aria-busy", "false");
  document.getElementById("site").style.opacity = "0";

}

我会很感激你的提示:)。

标签： javascriptphpcssloaderpreloader

解决方案

只需在启动函数之前检查所有字段是否都已填写。顺便说一句，我建议你不要用 php 生成这样的 html。它不可读

推荐阅读