Validation Function Problems 1

[Mighty]

I have a simple form and when the users clicks on the Proceed button, I want to hide the button and display a "Processing " message and then do the validation. I have two table rows at the end of my table - one called Proceed and one called Processing. Processing row is hidden. When the user clicks on the Proceed button, a validation function is called. The first action in this function is to hide the Proceed button and display the Processing message as below:

function validate(form)
{

	// Hide the Proceed button
	Proceed.style.display = 'none';
	Processing.style.display = 'block';

(all validation code follows here)

However, it always does the validation first and then hides the Proceed button and displays the processing message. Because the validation takes a while I have a problem whereby the user clicks the proceed button again because they think nothing is happening. What can I do??

Mighty

 

[theniteowl]

It is probably a timing issues.
Separate your display commands into a separate function, call that function from your proceed button and use a timer delay to call the validate function.
This is not tested but it would go something like this.

function showhide(form) {
  // Hide the Proceed button
  Proceed.style.display = 'none';
  Processing.style.display = 'block';
  window.setTimeout("validate("+form+")",500);
}

The setTimeout command will call the validate function passing the parameter form after 500 miliseconds pause.



At my age I still learn something new every day, but I forget two others.

 

[Mighty]

When I try that I get an error message - Line 0 'object' is undefined. This is my code:

function validate(form) {

	// Hide the Proceed button
	Proceed.style.display = 'none';
	Processing.style.display = 'block';

	// Validate the form content
	window.setTimeout("validateForm(" + form + ")", 500);
}

function validateForm(form)
{

   (validation code here.......)
}

Any ideas?

Mighty

 

[cLFlaVA]

you really should not implicitly reference objects. try this:

function validate(form)
{
    // Hide the Proceed button
    var p1 = document.getElementById("Proceed");
    p1.style.display = 'none';
    var p2 = document.getElementById("Processing");
    p2.style.display = 'block';

    .
    .
    .
}

also, note that you will need to give each of the elements an ID of "Proceed" and "Processing", respectively.

other than that, without the rest of your JS code, we can't be positive of the exact issue.



*cLFlaVA
----------------------------
[tt]mr. pibb + red vines = crazy delicious![/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[theniteowl]

You need to show more code than this since we do not know what your form looks like and how you are actually referencing your fields.
Why do you pass in a value called form in the first place?

Your best bet is to make sure the fields themselves have ID tags and then use getElementById to set their properties like this:

document.getElementById('Proceed').style.display = 'none';
document.getElementById('Processing').style.display = 'block';

Show all of your code and I can be more specific.



At my age I still learn something new every day, but I forget two others.

 

[1DMF]

At my age I still learn something new every day, but I forget two others.

- so how old are you?

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[Mighty]

The problem is with the timeout statement. It is hiding the Proceed button and displaying the Processing message but then it is falling over.

Mighty

 

[cLFlaVA]

where was the timeout statement in your original code?



*cLFlaVA
----------------------------
[tt]mr. pibb + red vines = crazy delicious![/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[Mighty]

I didn't have one in the original code. However, I then added in the window.setTimeout statement as in the code above and it is this that is causing it to fall over. Howver, if I add in a basic timeout statement like:

window.setTimeout("alert('Testing')", 500)

That works fine. But the command I am trying to do does not work.

Mighty

 

[theniteowl]

Are you sure it is not an issue in the validateForm function?

Try eliminating the form paramater and see if the function executes.
window.setTimeout("validateForm()", 500);


At my age I still learn something new every day, but I forget two others.

 

[cLFlaVA]

have you tried separating functionality? in other words, have two functions instead of one - one to hide / display the appropriate rows, then to call the second function. the second function would be just the validation. i wonder if that would more appropriately fix your timing issue.



*cLFlaVA
----------------------------
[tt]mr. pibb + red vines = crazy delicious![/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[Mighty]

NiteOwl,

When I took out the form, it worked fine. Thanks for all the suggestions.

Mighty

 

[theniteowl]

cLFlaVA, separating the functions is what I suggested and he is working on now. I think the problem lies in the passing of the parameter called form or the validation code itself is causing an error.

Mighty, form is a reserved word and you may be causing yourself problems by using a reserved word as your parameter name. You should change this to something else for good coding practice if even if it is not the cause of your problem.



At my age I still learn something new every day, but I forget two others.

 

[theniteowl]

Glad it worked for you.
I have had timing issues with my own scripts in the past, especially when you are doing something to alter the display of the page and the timers have helped me out many times.

Try changing the parameter name if you still need to pass it and see if that works. If you only have one form then you really do not need to pass a reference to the form, or if you use ID tags for the fields and getElementById to access them you do not need to reference the form at all.

At my age I still learn something new every day, but I forget two others.