...

View Full Version : Show animated gif AFTER form submit is clicked AND form validates



ray532
06-23-2012, 08:24 AM
Can anyone provide the javascript and/or jQuery code (preferably not ajax) to show an animated gif next to a form's submit button ONLY AFTER THE FORM SUCCESSFULLY VALIDATES and is in the process of submitting? Thanks in advance.

Philip M
06-23-2012, 08:40 AM
Submitting the form causes the page to refresh. So that is not possible.


It is your responsibility to die() if necessary….. - PHP Manual

vwphillips
06-23-2012, 12:44 PM
<!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" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
#img {
display:none;
}

/*]]>*/
</style>

<script type="text/javascript">
/*<![CDATA[*/

function Verify(frm){
if (frm['tom'].value!=''){
document.cookie='check='+true+';expires='+(new Date(new Date().getTime()+1*86400000).toGMTString())+';path=/';
return true;
}
return false;
}


function getcookie(){
if (cookie('check')){
document.getElementById('img').style.display='inline';
document.cookie='check='+true+';expires='+(new Date(new Date().getTime()+-1*86400000).toGMTString())+';path=/';
}
}

function cookie(nme){
var re=new RegExp(nme+'[^;]+','i');
if (document.cookie.match(re)){
return document.cookie.match(re)[0].split("=")[1];
}
return null;
}


/*]]>*/
</script>


</head>

<body onload="getcookie();" >
<form onsubmit="return Verify(this);" >
<input name="tom"/>

<input type="submit" name="" value="Submit" /><img id="img" src="http://www.vicsjavascripts.org.uk/StdImages/Cartoon1.gif" />

</form>
</body>

</html>

ray532
06-23-2012, 07:06 PM
Thanks for your replies guys. Vic, I tried implementing your code but it's not working for me (in IE or FF) when in place on my Unix host/server or testing on a Windows XP pc.

Now I'm wondering if it may be better to just base the event of showing an animated image on the event of the browser waiting for the next web page while the form is being processed/handled/submitted. In other words, tie the display of the animated gif to whatever triggers IE8 and FF12 to display "Waiting for http://www.website.com..." in the status bar at the bottom of the browser window whenever you go to a webpage.

But if someone can provide a javascript and/or jQuery to do the job based on the form submission/post, please note I actually have 2 fields that are being validated before the form submission/post can proceed.

ray532
06-23-2012, 07:14 PM
Vic, I'm wondering if your code isn't working for me because I didn't put onsubmit="return Verify(this);" in my form tag. I left it out because my form tag already has this code in it to validate the form: onsubmit="return validate(frm)". Is it possible to add "Verify(this);" to the tag? If so, can you show me the syntax? Thanks.

Logic Ali
06-23-2012, 09:05 PM
I'm doubtful about how that will look if the form navigates to another page. I would prefer to delay the submission of the form in order to allow a minimum display time, as shown below. Either way, once the submission is initiated, any animated gif is likely to freeze until the next page loads.

<!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" xml:lang="en" lang="en">

<head>
<title>TEST</title>
<style type="text/css">
/*<![CDATA[*/
#img {
visibility : hidden
}

/*]]>*/
</style>

<script type="text/javascript">
/*<![CDATA[*/

function validate( frm )
{
if( /\S/.test( frm.tom.value ) )
{
setTimeout( function(){ frm.submit(); }, 500 );
document.getElementById( 'img' ).style.visibility = 'visible';
}

return false;
}

/*]]>*/
</script>

</head>

<body>
<form action='http://google.com' onsubmit="return validate(this);" >
<input name="tom"/>

<input type="submit" name="" value="Submit" /><img id="img" src="http://www.vicsjavascripts.org.uk/StdImages/Cartoon1.gif">

</form>
</body>

</html>

ray532
06-23-2012, 11:19 PM
I see that both of the codes you guys provided work as standalone pages, but Logic Ali's delay lets you see the animated gif briefly before the form posts. My problem is when I integrate either of your codes into my form, neither one works. I think it may be because both of you are using onsubmit attributes in the form tag which I don't know how to add to my code because I have to use onsubmit="return validate(frm)" to validate 2 fields in the form. Is there any way to have 2 attributes for onsubmit in the form tag? And can you provide code to accommodate validation of 2 different fields, say "tom" and "bob", instead of just "tom"? Thanks very much.

vwphillips
06-24-2012, 02:20 PM
you will need to modify you existing verification


if (if the verification passes){
document.cookie='check='+true+';expires='+(new Date(new Date().getTime()+1*86400000).toGMTString())+';path=/';
return true;
}

ray532
06-24-2012, 06:41 PM
Vic, thank you. I'm having trouble implementing your code. It would be great if you could update my code below to include yours.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>TEST</title>

</head>

<body>

<form name="frm" action="http://google.com" onsubmit="return validate(frm)">

<input type="text" name="realname">realname<br />
<input type="text" name="email">email<br />
<input type="submit" name="" value="Submit" onClick="return confirmSubmit()">

<script language="javascript">
function validate(frm) {
var inputFields = new Array("email" ,"realname");
var counter;
var name;
var msg = "Please complete the following fields:\n";
var badFields = "";
for (counter = 0; counter < inputFields.length; counter++) {
name = inputFields[counter];
if (frm.elements[name].value.length == 0) {
if (name == "email") {
badFields = badFields + " - email \n";
} else {
badFields = badFields + " - " + name + "\n";
}
}
}
if (badFields.length != 0) {
alert(msg + badFields);
return false;
}
if (frm.email.value.length > 0) {
return emailCheck(frm.email.value);
} else {
return true;
}
}

function emailCheck(emailStr) {
var emailPat=/^(.+)@(.+)$/;
var specialChars="\\(\\)<>@,;:\\\\\\\"\\.\\[\\]";
var validChars="\[^\\s" + specialChars + "\]";
var quotedUser="(\"[^\"]*\")";
var ipDomainPat=/^\[(\d{1,3})\.(\d{1,3})\.(\d{1,3})\.(\d{1,3})\]$/;
var atom=validChars + '+';
var word="(" + atom + "|" + quotedUser + ")";
var userPat=new RegExp("^" + word + "(\\." + word + ")*$");
var domainPat=new RegExp("^" + atom + "(\\." + atom +")*$");
var matchArray=emailStr.match(emailPat);

if (matchArray==null) {
alert("email address seems incorrect (check @ and .'s)");
return false;
}

var user=matchArray[1];
var domain=matchArray[2];

if (user.match(userPat)==null) {
alert("email address username seems incorrect");
return false;
}

var IPArray=domain.match(ipDomainPat);
if (IPArray!=null) {
for (var i=1;i<=4;i++) {
if (IPArray[i]>255) {
alert("Destination IP address is invalid");
return false;
}
}
return true;
}

var domainArray=domain.match(domainPat);
if (domainArray==null) {
alert("email address domain name seems incorrect");
return false;
}

var atomPat=new RegExp(atom,"g");
var domArr=domain.match(atomPat);
var len=domArr.length;
if (domArr[domArr.length-1].length<2 || domArr[domArr.length-1].length>3) {
alert("email address must end in three-letter domain, or two letter country");
return false;
}

if (len<2) {
var errStr="email address is missing hostname";
alert(errStr);
return false;
}

return true;
}
</script>


</form>

</body>
</html>

ray532
06-26-2012, 06:14 PM
Bump... still trying to figure out how to combine my code with Vic's or Logic Ali's above. Any assistance would be greatly appreciated. Thanks.

ray532
07-02-2012, 07:02 AM
Is there a guru out there that can provide the magic solution here? I'd be most grateful. Thanks.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum