Отправить форму, показать div перед обновлением страницы - PullRequest
Новая
       11

Отправить форму, показать div перед обновлением страницы

0 голосов
/ 29 ноября 2018

Я не хочу показывать счетчик, возможно, за 2 секунды до перезагрузки страницы в моей форме отправки. 

<form class="ready" action="https://link.com" method="post">
<input name="test" type="submit" class="click" value="order"/>
</form>

У меня работает счетчик: 

<div class="thespinner"></div>    
<script>    
    $('.click').click (function () {    
    $(".thespinner").fadeIn("slow"); 
    });
</script>

Попытка просто добавить задержку ссылки на счетчик с этим кодом, но данные не поступают в базу данных: 

<script>
$('.click').click (function (e) {
$(".thespinner").fadeIn("slow");
   e.preventDefault(); //will stop the link href to call the blog page

   setTimeout(function () {
       window.location.href = "https://link.com";
    }, 2000);
});
</script>

Итак - нажмите кнопку, покажите счетчик 2 секунды, затем загрузите URL действия / перезагрузите страницу(данные должны быть отправлены во время отображения счетчика).

Заранее спасибо!

Ps Я обычно не кодирую javascript.

Ответы [ 2 ]

0 голосов
/ 30 ноября 2018

Вот как показать спиннер во время запроса AJAX (т.е. данные формы отправляются в фоновом режиме), а затем перенаправить после завершения запроса: 

$('.ready').submit(function(e) {
  $(".thespinner").fadeIn("slow");
  e.preventDefault(); //will stop the link href to call the blog page
  $.post("https://jsonplaceholder.typicode.com/posts", $(this).serialize(), function(reply) {
    window.location.href = "https://link.com";
  });
});
.thespinner {
  display: none;
  text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="ready" action="https://link.com" method="post">
  <input name="test" type="submit" class="click" value="order" />
</form>
<div class="thespinner"><img src="https://loading.io/spinners/wave/index.wave-ball-preloader.svg"></div>
0 голосов
/ 29 ноября 2018

Вам нужно будет отправить форму через ajax перед перенаправлением 

$('#theForm').bind('submit', function (e) {
    e.preventDefault();
    $(".thespinner").fadeIn("slow");
    $.ajax({
        type: "POST",
        url: 'someurl.htm',
        data: {},
        success: function () {
            setTimeout(function () {
                window.location.href = "https://link.com";
            }, 2000);
        },
        error: function(jqXHR, textStatus, error) {
          console.log(textStatus)
        }
    });
});
.thespinner { display: none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="thespinner">Spinner</div>
<form id="theForm" >
  <input type="text" name="something" />
  <button>Submit</button>
</form>
...