Display an image in a div with javascript

[neilpage]

Ok, I have a form which will be filled in by customers.

I want a small image to be displayed next to each textbox when the user has filled in the box. I have the validation sorted with javascript, but I would like an image to be displayed in a div depending on if they have filled in the correct information or not.

My JS isn't brilliant, but I'm thinking I'm going to need to use the getelementbyid thingy.

Something that basically says:

if blah blah = blah

document.getElementbyID('MyDiv') = frmvalidation
frmvalidation.image.src = 'tick.gif'

else

document.getElementbyID('MyDiv') = frmvalidation
frmvalidation.image.src = 'cross.gif'



You get the picture.

Any help would be appreciated!

[rangana]

Show us your form validation script so we could whip the requirement for you.

[neilpage]

<SCRIPT LANGUAGE=javascript>
function checkTestInput(me,e) {
	var complete;
	var valueEntered;
	
	complete = me.value;
	
	if(complete!=null || complete.length!=0) {
		valueEntered = complete.substring(complete.length-1,complete.length);
			if ( (allowedChars.indexOf(valueEntered) == -1) && (checkIfCRLF(e)==false) ) {
				Layer501.style.visibility='visible';
				Layer500.style.visibility='hidden';
			} else {Layer501.style.visibility='hidden'; Layer500.style.visibility='visible';
				complete = complete.substring(0, complete.length-1);
			
			} 
		
			<!--- me.value = complete; --->
	}
}
</SCRIPT>

				<table width="100%" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                    <td width="10"><input name="Name" type="text" class="Main" size="20" value="<cfif IsDefined ('session.CheckRequiredOrderFirstName')><cfif #session.CheckRequiredOrderFirstName# IS ''><cfelse>#session.CheckRequiredOrderFirstName#</cfif></cfif>" onBlur="checkTestInput(this,event);"></td>
                    <td><div name="Layer500" id="Layer500" style="visibility:hidden;width:60px;height:0px">Good</div><div name="Layer501" id="Layer501" style="visibility:hidden;width:60px;height:0px">Bad</div></td>
                  </tr>
                </table>

At the moment, its got 2 divs, and depending on the user input, it displays or hides them. I'd rather work out of one div, with a new image to display in the div (ie. a tick) for a correct input and a cross for a bad input. Also, I want the image to display as soon as the user moves onto the next textbox, so onBlur right?

Thanks

[rangana]

How does the validation works? What should be the correct input and what's not?

[neilpage]

The validation is taken from a script in another file, which, basically defines some allowed characters.

So if a user entered a series of letters, the image would show a 'tick', if the user entered some characters that weren't allowed, i.e. &*%£$ then the image would show a 'cross'.

Thanks

[rangana]

I'm completely buffled.

There are some variables in your script that are'nt working:
allowedChars, checkIfCRLF function, Layer501 and Layer500 variable is'nt a part of the snippet you've provided.


Anyway, if this does works in reality, have you tried replacing the texts good and bad with the image you wish?

<div name="Layer500" id="Layer500" style="visibility:hidden;width:60px;height:0px">Good</div><div name="Layer501" id="Layer501" style="visibility:hidden;width:60px;height:0px">Bad</div>

[neilpage]

The functions you mention are working, and appear in a separate script.

The method you have mentioned would work, but I really want this to work with just one div, not two. And I have two images that need to be loaded, therefore, I would need two div (using your method).

I want to load the images into one div, depending on the user input.

[bayson]

Hey,
why don't you change the "src" attribute of image and then dynamically load the image.