onblur Showimage textbox validation

I'm having an issue trying to ensure the image appears next to the correct text box depending on what the user enters.

When i enter anything in the Form1 an arrow appears next the text box in Form2. I'm new to javascript so if anyone has any ideas that would be great.

<SCRIPT LANGUAGE="JavaScript">

var arrowup = new Image(); arrowup.src = "arrowup.jpg";
var arrowdown= new Image(); arrowdown.src = "arrowdown.jpg";

function showImage(imagename, imageurl, errors) 
{
	document.getElementById("arrows").src = imageurl;

}

function validateForm()
{
	if (document.form1.company.value > 67) 
	{
		showImage("arrows", "arrowdown.jpg", true)   
	}
	if (document.form1.company.value < 67) 
	{
		showImage("arrows", "arrowup.jpg", true)
	}
}
</SCRIPT>

<input name="company" onblur="validateForm(form1)" size="6" maxlength="3" /> 
<img src="blank.jpg" id="arrows"/></span><br />

Code (markup):

and

<SCRIPT LANGUAGE="JavaScript">

var arrowup1 = new Image(); arrowup1.src = "arrowup1.jpg";
var arrowdown1= new Image(); arrowdown1.src = "arrowdown1.jpg";


function showImage(imagename, imageurl, errors) 
{
	document.getElementById("arrows1").src = imageurl;

}

function validateForm(form2)
{
	if (document.form2.managers.value < 25) 
	{
		showImage("arrows1", "arrowup1.jpg", true)   
	}
	if (document.form2.managers.value > 25) 
	{
		showImage("arrows1", "arrowdown1.jpg", true)
	}
	

}


</SCRIPT>
<form name="form2" class="style3">
  Typical managers lose 
  <input name="managers" onblur="validateForm(form2)" size="6" maxlength="3" />
   <img src="blank.jpg" id="arrows1"/>

Code (markup):

 

From your post you have two functions called validateForm? One takes a parameter the other doesn't? I'm guessing that the version of validateForm that takes a parameter is always being called. You also have 2 showImage() functions? Is this correct?

 

Thanks for that.

So i've changed the function name to ValidateForm1 and it seems to validate it correctly but the image appears in the second form.

 

You have two showImage() functions. One sets the arrow on form1 the second sets the arrow on form2. The second one is always called hence you always get the image on form2. Remove one of the showImage functions and use the name you're passing in to get the element. i.e.

function showImage(imagename, imageurl, errors) 
{
	document.getElementById([B]imagename[/B]).src = imageurl;

}

Code (markup):

 

Sorry i'm confused.
So if i remove one of the ShowImage functions what shall i replace it? What is the name i'm passing in to get the element?

function showImage(imagename, imageurl, errors) 
{
	document.getElementById(imagename).src = imageurl;

}

Code (markup):

 

You are currently calling it correctly ie

showImage("arrows", "arrowup.jpg", true)

or

showImage("arrows1", "arrowup1.jpg", true)


You only need one showImage function

 

So i can remove

function showImage(imagename, imageurl, errors) 
{
	document.getElementById("arrows1").src = imageurl;

}

Code (markup):

and just use ??

function showImage(imagename, imageurl, errors) 
{
	document.getElementById("arrows").src = imageurl;

Code (markup):

 

No, you need to use the parameter that you are passing to the function ie. the imagename parameter

function showImage([B]imagename[/B], imageurl, errors) 
{
	document.getElementById([B]imagename[/B]).src = imageurl;

}

Code (markup):

You only need one showImage function

 

Sorry now I'm confused ... remove one of the showimage functions and replace the other with

function showImage(imagename, imageurl, errors) 
{
	document.getElementById(imagename).src = imageurl;

}

Code (markup):

 

What he is saying is you only need the SINGLE INSTANCE:

showImage("arrows", "arrowdown1.jpg", true)


Pass your form variable accordingly and it will show in the correct place.

 

Thats great, thanks for your help!!

Another thing.. I'm trying to add a statement so that if the user enters the correct value then a tic appears?

if (document.form1.company.value > 67) 
	{
		showImage("arrows", "arrowdown.jpg", true)   
	}
	if (document.form1.company.value < 67) 
	{
		showImage("arrows", "arrowup.jpg", true)
	}
             if (document.form1.company.value = 67)
             {
                         showImage("arrows","correct.jpg",true)

}

Code (markup):

It seems to automatically enter 67 in the text box, is the statement wrong?

 

if (document.form1.company.value = 67)

Code (markup):

is assigning the value 67 to the form element 'company'

if (document.form1.company.value [B]==[/B] 67)

Code (markup):

== will 'test' for the value 67

 

Great, thanks for your help.