2013-09-13 3 views
0

Я пытаюсь создать Войти форму, скажем, что-то вроде этого:сделать форму пауза после отправки?

<form action="target.php" method="POST"> 
Username: <input type="text" name="user" id="user" /><br /><br /> 
Password: <input type="password" name="pass" id="pass" /><br /><br /> 
<input type="submit" value="submit" id="submit" /> 
</from> 

, что я пытаюсь сделать, это форма показать некоторые pic.gif в течение 3 секунд, когда пользователь нажимает отправить, а затем continue Я не хочу, чтобы он начинал следующий процесс напрямую.

+3

Я знаю, что это не ux.stackexchange.com, но почему вы хотите, чтобы пользователь ждал, искусственно? – tmh

+0

Могу ли я показать pic.gif без него? – caesar

+0

Да, если у вас есть pic.gif уже в кеше браузера. и нет гарантии, если изображение загружается через 3 секунды, правильно? лучший вариант css caheing/preloadin image –

ответ

1

Похоже, вы можете просто использовать функцию setTimeout().

<input type="submit" value="submit" id="submit" onclick="window.setTimeout(doStuffAfter, 30000)"> 

Вы вызываете его каким бы то ни было способом, когда func является вызываемым после задержки. Таким образом, вы можете открыть изображение, а затем отступить, как только задержка будет завершена.

window.setTimeout(func, delay, [param1, param2, ...]); 

https://developer.mozilla.org/en-US/docs/Web/API/window.setTimeout

+2

В этом решении отсутствует несколько частей. Вам нужно отобразить 'pic.gif' * до *, чтобы установить тайм-аут для отправки. Вам также необходимо предотвратить поведение по умолчанию 'input', добавив'; return false; 'в конец обработчика onclick. И тогда вам придется вручную отправить форму в обработчик setTimeout с помощью 'theForm.submit()'. –

+0

спасибо, что у меня есть идея – caesar

3

Есть изображение изначально в стиле «дисплей: ни один» и изменить форму декларации hanlde «onsubmit» событие:

<form action="target.php" method="POST" onsubmit = "mySubmit(this)"> 

, а затем определить функцию:

function mySubmit(frm) { 
    document.getElementById("myImg").style.display = 'block'; 
    setTimeout(function() {frm.submit()}, 3000); 
    return false; 
} 

Он будет отображать изображение и отменить оригинал отправить запрос. Но через 3 секунды он отправит форму из кода.

0

Попробуйте

$('form').submit(function() { 
    if (showPic()) { 
    return true; 
    } else { 
    return false; 
    } 
} 

С UX точки зрения я рекомендую давая им подсказку в вашей картинке.

Смежные вопросы