Открывайте Fancybox только после отправки формы, если LiveValidation прошла успешно
Я использую LiveValidation в форме отправки, которая включает в себя 1-4 поля загрузки изображений. Клиенты с нетерпением ждут, что после того, как они нажмут кнопку "Отправить", форма начнет загружать изображения, и это займет время в зависимости от размера этих изображений.
Я пытался добиться того, чтобы после того, как пользователь отправит форму и пройдет LiveValidation, появится всплывающее окно Fancybox с загрузочным изображением и текстом. Я не хочу, чтобы индикатор загрузки загружался, поскольку хостинг клиента не имеет расширения загрузки PECL или APC, и я не хочу использовать AJAX по соображениям совместимости.
Я просто хочу, чтобы загружаемое изображение вращалось на экране, чтобы пользователь знал, что ему нужно подождать.
Я попытался создать для него функцию и настроить ее выполнение для событий "onSubmit" и "onClick", но в любом случае всплывающее окно появляется, даже если в форме есть ошибки, на которые указывает LiveValidation,
Кроме того, я предполагаю, что после загрузки изображений и отправки формы страница будет автоматически перенаправлена на подтверждение.
Я не очень хорошо разбираюсь в javascript и, следовательно, не смог манипулировать сценариями для достижения желаемых результатов.
Любая помощь по этому вопросу будет принята с благодарностью. Также, если у кого-то есть лучшее решение, это тоже будет здорово!
Спасибо:)
Для проверки в реальном времени я использую скрипт непосредственно с сайта: http://livevalidation.com/
Вот инициализация livevalidation и fancybox:
<script type="text/javascript">
$(document).ready(function () {
$(".form-validate-label").validate();
$(".form-validate-p").validate({errorElement: "p"});
$(".popup").fancybox();
});
</script>
Сама форма довольно большая, но вот область полей:
<form name="frmsubmission" id="frmsubmission" method="post" class="form-validate-p" enctype="multipart/form-data" action="">
...
...
<div class="regrow1">
<div>
<label class="label-large"><span class="required">*</span>Headshot Image File:</label>
<input class="required" name="head_shot" id="head_shot" size="40" type="file" />
</div>
</div>
<div class="regrow2">
<div>
<label class="label-large">Attach Resume:</label>
<input name="txtcv" id="txtcv" size="40" type="file" />
</div>
</div>
<div class="regrow1">
<div>
<label class="label-large">Full body shot Image File:</label>
<input id="body_shot" name="body_shot" size="40" type="file" />
</div>
</div>
<div class="regrow2">
<div>
<label class="label-large">Sanpshot Image File:</label>
<input id="snap_shot" name="snap_shot" size="40" type="file" />
</div>
</div>
<br /><br />
<div id="submitrow">
<button id="submit" name="submit" value="Submit" type="submit">Submit</button>
</div>
</form>
1 ответ
Вместо использования fancybox и других подходов. Если вы используете plupload, я думаю, что это будет хороший интерфейс загрузки и функция загрузки статуса. ниже ссылка. пожалуйста, посмотрите, это может вам помочь.
http://www.plupload.com/example_queuewidget.php
вместо шоу fancybox я добавил один div с его loadingId. Первоначально он будет скрыт, когда вы нажмете кнопку "Отправить", он покажет div, внутри этого div вы вращаете путь изображения. вот полный код
Я использую JQuery для скрытия шоу. если вы не хотите использовать jquery, вы можете использовать javascript также для скрытия и показа.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="Js/LiveValidation.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".form-validate-label").validate();
$(".form-validate-p").validate({ errorElement: "p" });
$(".popup").fancybox();
});
function showloading() {
$("#loadingId").show();
}
</script>
</head>
<body>
<form name="frmsubmission" id="frmsubmission" method="post" class="form-validate-p"
enctype="multipart/form-data" action="">
<div class="regrow1">
<div id="loadingId" style="display:none;">Loading....</div>
<div>
<label class="label-large">
<span class="required">*</span>Headshot Image File:</label>
<input class="required" name="head_shot" id="head_shot" size="40" type="file" />
</div>
</div>
<div class="regrow2">
<div>
<label class="label-large">
Attach Resume:</label>
<input name="txtcv" id="txtcv" size="40" type="file" />
</div>
</div>
<div class="regrow1">
<div>
<label class="label-large">
Full body shot Image File:</label>
<input id="body_shot" name="body_shot" size="40" type="file" />
</div>
</div>
<div class="regrow2">
<div>
<label class="label-large">
Sanpshot Image File:</label>
<input id="snap_shot" name="snap_shot" size="40" type="file" />
</div>
</div>
<br />
<br />
<div id="submitrow">
<button id="submit" name="submit" value="Submit" type="submit" onclick="showloading();">Submit</button>
</div>
</form>
</body>
</html>