Изменение стилей после отправки формы?

Question

[unlik]

После отправки формы выполняется

onsubmit="document.getElementById('osForm').style.display = 'none';document.getElementById('form_one_success').style.display = 'block';"

То есть один блок скрывается, другой появляется. Как можно через 5 секунд вернуть обратно?

Answer 1

[Владимир Проскурин]

Куда-нибудь в JS

var timeout;
function showBlocks() {
    document.getElementById('osForm').style.display = 'none';
    document.getElementById('form_one_success').style.display = 'block';
    clearTimeout(timeout);
    timeout = setTimeout(function() {
        document.getElementById('osForm').style.display ='block';
        document.getElementById('form_one_success').style.display = 'none';
    }, 5000);
}

а в onsubmit напишите только
onsubmit="showBlocks();"

Comments

[unlik]

Спасибо, помогло. Еще такой вопрос. Есть модальное окно сделаное при помощи magnific popup, как закрыть его через 5 секунд после отправки формы?

Answer 2

[Андрей Седышев]

function onSubmit () {
  document.getElementById('osForm').style.display = 'none';
  document.getElementById('form_one_success').style.display = 'block';
  setTimeout(function () {
    document.getElementById('form_one_success').style.display = 'none';
    document.getElementById('osForm').style.display = 'block';
  }, 5000);
}

Но, вообще, я бы не советовал опираться на таймеры, т.к. JS не факт, что стили данных элементов не изменятся кем-то другим, пока функция в таймере будет ждать своего выполнения.

Comments

[unlik]

Спасибо, помогло. Еще такой вопрос. Есть модальное окно сделаное при помощи magnific popup, как закрыть его через 5 секунд после отправки формы?

[Андрей Седышев]

unlik,
Как я решил вопрос за 20 секунд:

1. Гуглим что это вообще за библиотека: раз
   
2. Идём в раздел Documentation
   
3. Подраздел API
   
4. Пункт Public methods
   

$.magnificPopup.close(); // Close popup that is currently opened (shorthand)