Javascript for Image Source Updating

[ciber]

Hi,

 

Well I have finally ventured and decided I to use javascript to create a more friendly user interface.

basically I need help on how I can do the following:

<img src="generate.php?" style="float:right;>
<form action="generate.php" method="post">
Name: <input name="name"><br>
<select name="attribs">
<option value="atr1">Here 1</option>
<option value="atr2">Here 2</option>
<option value="atr3">Here 3</option></select><br>
Gender: <input type="radio" name="gender" value="male">Male OR <input type="radio" name="gender" value="female">Female
</form>

So basically the code is an example of what im trying to achieve, but the part of the javascript im struggling with to find is how can I get the images source to update, so as the option are selected the variables are added to the arguments, ie I type my name in, when the form defocuses, the images src updates from generate.php? to generate.php?name=JohnDoe and so forth for the other fields.

[JasonLewis]

To trigger an event when the user has finished typing there name and has clicked out of the text box you can use the onblur event handler. You could make it like this:

 

<img src="generate.php?" id="image-generate" />
Name: <input name="name" id="name" onblur="javascript: document.getElementById('image-generate').src='generate.php?name=' + this.value;" />

 

You'd best make sure that in your generate.php file you perform checks on the input to ensure nothing nasty is coming through.

[ciber]

will do, just one question what happens when another field, say gender is edited - wont that then remove the setting for name?

[ciber]

nevermind I got another idea using this - thanks