Я пытаюсь просто показать gid загрузки после отправки формы. Мой код работает неправильно для загрузки gif. Вы увидите, что мое изображение для gif установлено на visibility: hidden.
<script src="js/jquery-1.11.1.min.js"></script>
<div class="" style="width: 480px; margin: 0 auto; margin-top: 20px;" id="form_wrapper">
<img src="img/loader.gif" id="gif" style="display: block; margin: 0 auto; width: 100px; visibility: hidden;">
<div class="fade" id="form">
<form action="process_login.php" method="POST" name="simplelogin" id="login_form"><br />
<label for="username"> Username:</label>
<input type="username" name="username" id="username" size="30" required><br><br>
<label for="password"> Password:</label>
<input type="password" name="password" id="password" size="30" required><br><br>
<input class="load_button" type="submit" name="submit" id="submit" value="Submit" placeholder="Submit">
</form>
</div>
</div>
<div class="fifty"></div>
<script type="text/javascript">
$('.load_button').submit(function() {
$('#gif').show();
return true;
});
</script>
Метод show() влияет только на настройки display CSS. Если вы хотите установить видимость, вам нужно сделать это напрямую. Кроме того, элемент .load_button является кнопкой и не вызывает событие submit. Вам нужно изменить ваш селектор на form, чтобы это работало:
$('#login_form').submit(function() {
$('#gif').css('visibility', 'visible');
});
Также обратите внимание, что return true; избыточен в вашей логике, поэтому его можно удалить.
Входы кнопок не имеют события отправки. Попробуйте добавить обработчик события в форму:
<script type="text/javascript">
$('#login_form').submit(function() {
$('#gif').show();
return true;
});
</script>
Лучший и чистый пример с использованием только JS
Ссылка: TheDeveloperBlog.com
Шаг 1 - Создайте свой java script и поместите его на свою HTML-страницу.
<script type="text/javascript">
function ShowLoading(e) {
var div = document.createElement('div');
var img = document.createElement('img');
img.src = 'loading_bar.GIF';
div.innerHTML = "Loading...<br />";
div.style.cssText = 'position: fixed; top: 5%; left: 40%; z-index: 5000; width: 422px; text-align: center; background: #EDDBB0; border: 1px solid #000';
div.appendChild(img);
document.body.appendChild(div);
return true;
// These 2 lines cancel form submission, so only use if needed.
//window.event.cancelBubble = true;
//e.stopPropagation();
}
</script>
в вашей форме вызовите функцию java script для отправки события.
<form runat="server" onsubmit="ShowLoading()">
</form>
Вскоре после отправки формы он покажет вам загрузочное изображение.
Как насчет функции onclick:
<form id="form">
<input type="text" name="firstInput">
<button type="button" name="namebutton"
onClick="$('#gif').css('visibility', 'visible');
$('#form').submit();">
</form>
Конечно, вы можете поместить это в функцию, а затем запустить ее с помощью onClick