Web Design Forums

pagey · 11-07-2008, 04:44

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 = tick.gif

else

document.getElementbyID.MyDiv = cross.gif

You get the picture.

Any help would be appreciated!

Pete Nice · 11-07-2008, 07:53

Pagey - here's a little something I put together - you should be able to work it out from here:

Code:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script type="text/javascript">

function image() {
	var img = document.createElement("IMG");
	img.src = "img/dir.gif";
	document.getElementById('image').appendChild(img);
}
</script>
</head>

<body>
<div id="image"></div>
<div><a href="javascript:image();">click to see image</a></div>
</body>
</html>

pagey · 11-07-2008, 08:58

Thanks Pete (again!)

I'm mega snowed under today, so when I come back to looking at the form, I'll have a play with that code.

Cheers

blackf0rk · 11-07-2008, 09:11

Pete Nice's code will work but doesn't do what I think you're trying to do pagey. In Pete's code, it simply adds an image element to the page. You basically want to visually show validation with graphics instead of text is a specific place and possibly replace the current graphic with a different one depending on validation. The correct syntax for getElementById is...

Code:

document.getElementById('idName')

If you already have an image next to each text box (with a different Id of course), you just need to change the image's src after the textbox has been run through your validation code and passess:

Code:

document.getElementById('idName').src='/images/tick.gif'

Simple as that.

MikeMackay · 11-07-2008, 09:46

Another approach would be to have the image as the background and use JS to change the css class to .approved or something, where .approved is a style declaration in your site css.

Using that method could give you greater control over the form item without reverting to too much JS code.

Just my two cents/pence.....

Pete Nice · 11-07-2008, 09:47

really - there was me thinking that mine appended an image to the div id "image" rather than just adding it to the page:

Code:

document.getElementById('image').appendChild(img);

wassup blackf0rk? Can't read?....

pagey · 11-07-2008, 10:25

Now, now gentlemen, lets not argue.

I'll be looking at this thing into more depth soon, so I'll be trying all of your suggestions to some degree I should imagine.

Thanks again.

blackf0rk · 11-07-2008, 11:07

Quote:

Originally Posted by Pete Nice

really - there was me thinking that mine appended an image to the div id "image" rather than just adding it to the page:

Code:

document.getElementById('image').appendChild(img);

wassup blackf0rk? Can't read?....

Wow. That's pretty harsh. And sad.

Chill out Pete. I guess it's a matter of semantics with you. Does your code not add an image to the page? Excuse me, let me rephrase it so you can understand...does your code not append an image to the div (which is on the page)?

At any rate, pagey isn't looking to keep appending images to divs. He's looking to swap out images based on validation. This is abundantly clear from his original post. If he was to use your code, he'd have swapping tick.gif's and cross.gif's appending one after each other on the page (or the div, whichever you'd like to say).

No one's knocking your code Pete. In fact, I learned from it. But it's the wrong code for the application. So get used to people trumping your code - it happens all the time; someone else always will have a "better" way of doing it. Look at me, MikeMackay trumped my code by posting his opinion on how he'd do it. And in my opinion it is a better way!

Pete Nice · 11-07-2008, 11:26

Like I said

Quote:

Pagey - here's a little something I put together - you should be able to work it out from here:

And btw, I don't care if someone trumps my code because I'm not a coder - I just like people to read what I said.

Tom_E · 11-07-2008, 11:33

Don't argue with Pete – he's been drinking all day.

Pete Nice · 11-07-2008, 11:35

wheedwacker · 11-07-2008, 17:07

Personally, I would go with what MikeMackay said. But Pete's solution would work if you had just a function call that made the image appear only once when the right value was added.

11-07-2008, 04:44	#1 (permalink)
pagey Resident Cheese Expert Join Date: Aug 2006 Location: South Wales Posts: 702	Display an image in a div with javascript 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 = tick.gif else document.getElementbyID.MyDiv = cross.gif You get the picture. Any help would be appreciated!

11-07-2008, 09:11	#4 (permalink)
blackf0rk Enspiar Productions Join Date: Oct 2006 Location: MKE, WI Posts: 43	Pete Nice's code will work but doesn't do what I think you're trying to do pagey. In Pete's code, it simply adds an image element to the page. You basically want to visually show validation with graphics instead of text is a specific place and possibly replace the current graphic with a different one depending on validation. The correct syntax for getElementById is... Code: document.getElementById('idName') If you already have an image next to each text box (with a different Id of course), you just need to change the image's src after the textbox has been run through your validation code and passess: Code: document.getElementById('idName').src='/images/tick.gif' Simple as that.

11-07-2008, 09:46	#5 (permalink)
MikeMackay Everything is fine. Join Date: Feb 2005 Location: Witham & London Posts: 815	Another approach would be to have the image as the background and use JS to change the css class to .approved or something, where .approved is a style declaration in your site css. Using that method could give you greater control over the form item without reverting to too much JS code. Just my two cents/pence..... __________________ Mike Mackay: Web Developer - LinkedIn - FutureTweets; Easily create and schedule your Twitter posts

11-07-2008, 09:47	#6 (permalink)
Pete Nice Warchief Join Date: Apr 2003 Posts: 445	really - there was me thinking that mine appended an image to the div id "image" rather than just adding it to the page: Code: document.getElementById('image').appendChild(img); wassup blackf0rk? Can't read?....

11-07-2008, 11:33	#10 (permalink)
Tom_E Whippet Botherer™ Join Date: Jan 2007 Location: Kent, England Posts: 1,532	Don't argue with Pete – he's been drinking all day. __________________ portfolio I flickr/me

11-07-2008, 08:58	#3 (permalink)
pagey Resident Cheese Expert Join Date: Aug 2006 Location: South Wales Posts: 702	Thanks Pete (again!) I'm mega snowed under today, so when I come back to looking at the form, I'll have a play with that code. Cheers

11-07-2008, 10:25	#7 (permalink)
pagey Resident Cheese Expert Join Date: Aug 2006 Location: South Wales Posts: 702	Now, now gentlemen, lets not argue. I'll be looking at this thing into more depth soon, so I'll be trying all of your suggestions to some degree I should imagine. Thanks again.

11-07-2008, 11:35	#11 (permalink)
Pete Nice Warchief Join Date: Apr 2003 Posts: 445

11-07-2008, 17:07	#12 (permalink)
wheedwacker competitionmaster 2.0 Join Date: Oct 2006 Location: USA Posts: 1,413	Personally, I would go with what MikeMackay said. But Pete's solution would work if you had just a function call that made the image appear only once when the right value was added. __________________ Design and Development Referrals: FlashDen ThemeForest AudioJungle

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search