I use LiveValidation on a submission form that involves 1-4 upload fields for images. What the clients are impatient about is that once they click on submit, the form starts to upload the images, and it takes time according to the size of those images.
What I was trying to achieve is that once the user submits the form, and the LiveValidation passes, a Fancybox popup appears which has a loading image and some text. I do not want the loading progress bar as the client's hosting does not have the PECL upload progress extension or APC, and I don't want to use AJAX for compatibility reasons.
I just want a loading image to be rotating on the screen so the user knows that they have to wait.
I tried to create a function for it and set it to be executed on the events of "onSubmit" and "onClick", but in either case, the pop up appears even though there are errors in the form that are being pointed out by LiveValidation.
Also, i am assuming that once the images get uploaded and the form gets submitted the page will automatically redirect to the confirmation.
I am not good with javascript, and hence was unable to manipulate the scripts to achieve the desired results.
Any help on this will be greatly appreciated. Also if anyone has a better solution, that too will be great!
Thank you :)
for live validation, I'm using the script directly from the website: http://livevalidation.com/
Here is the livevalidation and fancybox initiation:
<script type="text/javascript">
$(document).ready(function () {
$(".form-validate-label").validate();
$(".form-validate-p").validate({errorElement: "p"});
$(".popup").fancybox();
});
</script>
The form itself is pretty big, but here is the fields area:
<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>
instead of using fancybox and others approach. if you use plupload, i think that it will nice uload interface and upload status feature. below is the link.please see this may help you.
http://www.plupload.com/example_queuewidget.php
instead of show fancybox, i added one div with its loadingId. initially it will be hidden when you click, submit button it show the div, inside this div, you rotating image path. here is complete code.
i am using jquery for hide show. if you do not want to use jquery, you can use javascript also for hide and show.
<!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>