Как сделать условие для загрузчика onclick, когда пользователь не заполнил все поля в форме - PullRequest
Новая
       38

Как сделать условие для загрузчика onclick, когда пользователь не заполнил все поля в форме

0 голосов
/ 16 февраля 2020

У меня проблема с формой, в ней есть информация и фото для загрузки. Время отправки формы различается в зависимости от веса файла, если оно составляет ~ 3 МБ, это нормально, однако, если кто-то использует мобильную версию, он использует камеру в телефоне, а затем фотография может весить до 7 МБ - тогда время загрузки слишком велико и пользователь в замешательстве. Поэтому я использовал простой загрузчик onclick и тот же, что и onload на следующей странице, прекрасно работает, если кто-то не заполнит поле в форме, тогда загрузчик закроет всю страницу и развернется навсегда. Как я могу сделать так, чтобы загрузчик появлялся при загрузке только в том случае, если все поля заполнены правильно?

Там есть форма:

image

Там есть 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";

}

Буду благодарен за подсказки:).

Ответы [ 3 ]

0 голосов
/ 16 февраля 2020

Просто обновите кнопку отправки до 

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

//Return true if the form is not empty, false if it is
const isNotEmpty = () => {
  //supose the form is not empty
  let flag = true;
  //For all input, check if the value is different of empty
  document
    .querySelectorAll("input")
    .forEach(input => flag =  input.value !== "" && flag);
  return flag;
};

//Listen when user click on the submit button
document.getElementById('submitBtn').addEventListener('click',e => {
  let flag = isNotEmpty();
  if(!flag) {
    //don't submit form because it's empty
    e.preventDefault();
    //don't display the placeholer loader
    return;
  }
  //Now we can display the placeholder
  //So put the placeholder loader logic here
})
0 голосов
/ 16 февраля 2020

Спасибо, Фасо-Дев! Пока что это работает довольно хорошо, но вот небольшая ошибка, мне нужно сделать это так:

Кнопка (нужно щелкнуть мышью): 

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

Сценарий: (это было хорошо!: )) 

function teest() {
    const isNotEmpty = () => {
    let flag = true;

     document 
        .querySelectorAll("input")
        .forEach(input => flag =  input.value !== "" && flag);
      return flag;
    };

    document.getElementById('submitBtn').addEventListener('click',e => {
      let flag = isNotEmpty();
      if(!flag) {
        e.preventDefault();
        return;
      }
      var preloader = document.getElementById("preloader");
      preloader.style.opacity = "1";
      preloader.setAttribute("aria-busy", "false");
      document.getElementById("site").style.opacity = "0";
    })
    }

Я оставляю это для следующих поколений ^^. Большое спасибо, faso-dev!

0 голосов
/ 16 февраля 2020

Просто убедитесь, что все поля заполнены перед запуском вашей функции. Кстати, я советую вам не генерировать html, как это с php. Это не читается

...