Use form to display non-preset images...?

Hey, how's it doin? This is my first time here and I hope it will be the best place

I am pretty sure this can be done with simple Javascript but I just can't find the appropriate script.

I have a form that askes for a filename.
-------------
<input type="text" name="filename"> .PNG
<input type="submit" value="Update"></form>
-------------
When I press 'Update' I want the page to dynamically (correct term?) load 6 images that begin with the word that was submitted in the form, followed by preset characters. Example:
Type your name:
"Mike"
then the page loads 'Mike_1.png', 'Mike_2.png' ... 'Mike_6.png'.

- Mike

I'm a complete noob at javascript. Here's my thought for what it's worth. At least it's simple and it works, just an input and a "for" loop. I used a "prompt" for the name, I imagine you can modify that easily to substitute the return from your form:

Code: Select all

var name=prompt("Write in the name", "");

for (i = 1; i <= 5; i++)
{
document.write ("<img src=\""+name+i+".jpg\"><br><br>");
}

Be careful you don't leave any spaces in the return - this drove me nuts because I can't get full graphic properties on my editor and it was writing "mason1 .jpg".

I'm a n00b too
I think it's that 'document.write' I was looking for. I need to know the javascript equivalent to <img src=""> so I can include values and code in the address but I don't know what those commands are called to get a complete list. I'm trying to make a sort of category viewer where you input the word at the start of the image name and it only displays those images.

car_mike.png, horse_mike.png, bike_mike.png
INPUT = car
would only display the first one.

- Mike