Javascript help needed.

[Straylight]

I'm designing the custom avatar system for Kaldris, and at the moment I'm writing the character creation screen.

OK, here's what I need to do.

I have a <form> which consists of several radio buttons, which are used to select various attributes such as hair style, hair colour, eye colour, race, gender, etc.

Somewhere on the same page there will be an image of the user's character. I want it so that when you click a certain button on the form, it reloads this image. Here's the catch:

The image is generated by a php file. The URL will be something like "kavatar.php?hair_colour=1&race=2&eye_colour=4 ..." etc (but the URL will probably look longer than that)

The selections that the user has made on the form need to be stored into numeric variables and then used as part of the URL for the image when the "refresh avatar" button is clicked. This way, the PHP file recieves the attributes from the form, allowing it to generate the correct customised avatar for the user.

I hope I've outlined the guts of this system clearly enough. I don't know any Javascript though, so any help would really be appreciated! Thanks

HINT: Check this out to get a feel for what I mean (IMO their system doesn't work too well though - it's functionless in Mozilla anyway):

http://ruby.go-gaia.com/forum/character.php

[Mithrandir]

HINT: Check this out to get a feel for what I mean (IMO their system doesn't work too well though - it's functionless in Mozilla anyway):

http://ruby.go-gaia.com/forum/character.php

phpBB : Critical Error

Could not connect to database, please try again later. Sorry for the inconvinience.

I can probably help out with the JavaScript. Are you looking to learn - or do you just want someone to do it for you? Will this be the only JS project?

If you are looking for examples, here's a game I wrote for the JS class I took. (Note: It works in all browsers except for one random version of IE that doesn't support the push and pop commands. What the dirt were they thinking???)

http://www.flactem.com/ocelot/pyramid/

[Straylight]

I imagine that this will be the only Javascript project I use... the code will most likely get reused for other parts of Kaldris though. There'll probably be quite a few instances where I need to pass paramters to a image-generating script without having to reload the page.

To be honest I prefer to learn stuff, so a few good hints would be best. I have a small amount of Javascript background (I learned a bit of it 6 years ago) but I wouldn't say I "know" Javascript.

Looking at your code I think I could probably stumble through changing the URL of an image but getting info off the form would have me stumped

[Mithrandir]

So, I need a little more clarity. The idea is:
1. There is a form that will eventually be submitted.
2. While filling out the form, a "Preview" of your char must be updated.
3. When you finally get the view you want, you press "submit."

Is that the general overview?

[Straylight]

Yup, that's right. There will be a button that the user can press to "preview" their character. When this preview button is pressed, the image reloads.

[Straylight]

bumpitty bump.

[Mithrandir]

Sorry. ADHD.

OK. Let's start with a small piece. What you want to do is create an image that will change whenever a user presses a button. So try this: http://dlc.deanza.fhda.edu/javascript.html and see if it does what you want. We can make a bunch of them do stuff later, but let's make sure we are on the same page first.

EDIT: OK, I've changed this a little bit. It's now (I guess) a little more acurate a reflection of what you want to do.