Reduceing Javascript Lag

cathering1 · August 17th, 2007, 04:57 PM

I have this contact form (cathering.co.uk/contact.php)

In FireFox And IE6 Is creates huge lag when you fill in the last field that it validates I think it dose it because in order to check if the form has been correctly filled out I have a put a SetTimeOut() to the funt that disables and undisables the Send button according to if its been filled in correctly but once its called it goes into a loop by using SetTimeOut(); I narrowed it down to that being the source of the lagginess i tried slowing it down from 1 millisecond to 50 milliseconds it didet really help alot I know its the javascript because i removed the JS file and it worked with out any lag, but even after doing that it still had mass lag ( The Program Just became inrespondive) Any ideas to stop the lag?

Also if i slow it down to more than 500 milliseconds it can be open to people clicking the submit button in time .

Heres javascript code:

HTML Code:

var re = new RegExp("[a-zA-Z]");
var disable1 = 0;
var disable2 = 0;
var disable3 = 0;
var disable4 = 0;
var disable5 = 1;
var disable6 = 0;

function validate(type,input,errordisplay){
if(type == "blank1"){
if(!input.value.match(re)){
errordisplay.innerHTML = '<span style="color:#FF0000;">Invalid Input</span>';
disable1 = 0;
}
else {
disable1 = 1;
errordisplay.innerHTML = '<span style="color:#006600;">Valid Input</span>'}}

if(type == "blank2"){
if(!input.value.match(re)){
errordisplay.innerHTML = '<span style="color:#FF0000;">Invalid Input</span>';
disable2 = 0;
}
else {
disable2 = 1;
errordisplay.innerHTML = '<span style="color:#006600;">Valid Input</span>'}}

if(type == "blank3"){
if(!input.value.match(re)){
errordisplay.innerHTML = '<span style="color:#FF0000;">Invalid Input</span>';
disable3 = 0;
}
else {
disable3 = 1;
errordisplay.innerHTML = '<span style="color:#006600;">Valid Input</span>'}}



if (type == "email"){
check=/^\w+[\+\.\w-]*@([\w-]+\.)*\w+[\w-]*\.([a-z]{2,4}|\d+)$/i
if(! check.test(input.value)){
errordisplay.innerHTML = '<span style="color:#FF0000;">Invalid Input</span>';
disable4 = 0;
}
else {
disable4 = 1;
errordisplay.innerHTML = '<span style="color:#006600;">Valid Input</span>'}}

if(type == "confirmemail"){
if(input.value.toLowerCase() != document.getElementById("contact_form").email.value.toLowerCase())
{errordisplay.innerHTML = '<span style="color:#FF0000;">Invalid Input</span>'
disable6 = 0;}
else {
disable6 = 1;
errordisplay.innerHTML = '<span style="color:#006600;">Valid Input</span>'}}}

function checksubmitbutton(){
if(disable1 == 1 && disable2 == 1 && disable3 == 1 && disable4 == 1 && disable5 == 1 && disable6 == 1){
document.getElementById('contact_form').submit.disabled=false;
setTimeout('checksubmitbutton()',500);}
else {
document.getElementById('contact_form').submit.disabled=true;}
setTimeout('checksubmitbutton()',500);
}

ScottR · August 20th, 2007, 11:06 AM

That's not alot of code. So it shouldn't create a lag. The only thing that I see that may have been done differently is to have your submit button disabled, at the end of your function set it to enabled. If it doesn't reach the end of the function, it doesn't get enabled.