By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,685 Members | 1,840 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,685 IT Pros & Developers. It's quick & easy.

Get image based on user input

P: n/a
I'm sorry to ask what must be a very simple question, but I just can't seem
to get this to work.
Right now I am using the javascript 'prompt' to enter a photoid and the
script that I am using uses document.write
to put the proper image on the page ....i.e. PHOTOID =".jpg"

What I want is a simple user input text area and when submit is clicked a
placeholder image beneath is exchanged for the proper
image based on the user's input.
example: User enters re4555 and the image re4555.jpg replaces the image
nosel.jpg
that I have created which basically says 'no image selected'.

please,please help, this is very frustrating.
Thank you
we*******@computerholistics.com
Jul 23 '05 #1
Share this Question
Share on Google+
5 Replies


P: n/a
Lee
SPEAKIT said:

I'm sorry to ask what must be a very simple question, but I just can't seem
to get this to work.
Right now I am using the javascript 'prompt' to enter a photoid and the
script that I am using uses document.write
to put the proper image on the page ....i.e. PHOTOID =".jpg"

What I want is a simple user input text area and when submit is clicked a
placeholder image beneath is exchanged for the proper
image based on the user's input.
example: User enters re4555 and the image re4555.jpg replaces the image
nosel.jpg
that I have created which basically says 'no image selected'.


Is there a reason why you want to use document.write()?
Am I correct that you are not actually submitting a form?
It would probably be easier and more helpful to correct your
code than to show you new code.

Jul 23 '05 #2

P: n/a
here is an example of something that doesn't work.....lol

<html>
<head><title>FormImage Test</title>
<script>
var selimage = NewImage();
selimage.src = "nosel.jpg"
function dothisnow(){
var picid = document.getElementById("picid").value;
selimage.src = picid +".jpg";
}
</script>
</head>
<body>
<form>
<p align="center">
Please Enter your Photo ID:<br>
<input type=text id="picid" name="picid">
<input type=button value="Click Here to See Your Photo" name="clicker"
id="clicker" onClick=dothisnow
();>
<p align="center"><img src="nosel.jpg" name="selimage" id="selimage">
</form>
</body>
</html>
--sorry for being an idiot.....
Jul 23 '05 #3

P: n/a
In article <cG******************@bignews4.bellsouth.net>,
"SPEAKIT" <SP*****@speaknet.net> wrote:
here is an example of something that doesn't work.....lol


I kind of lost track of the changes that I made.
Robert
Try this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title>FormImage Test</title>
<script type="text/javascript">

var nasaPath = "http://spaceplace.nasa.gov" +
"/en/educators/images/solarsystem/";

function dothisnow(name){
/* Get the reference to the image. */
var picId = document.images["imageId"];
/* Set the name of the image.
This causes the new image to be loaded. */
picId.src = nasaPath + name + "_T.jpg";
}
</script>

</head>
<body>
<form name="myForm">
<p style="text-align: center;">
Please Enter your Photo ID:<br>
<input type=text
name="picid"
size="25">
<br><br>
<input type=button
value="Click Here to See Your Photo"
name="clicker"
onClick=
"dothisnow(document.forms['myForm'].elements['picid'].value);">
<br>
<img id="imageId"
onerror="alert('Could not find the image.');">
</form>

<p>Some values to type or to cut and paste:
<ul>
<li>Apollo17_Earth</li>
<li>clem_full_moon</li>
<li>erosreconstruct_near</li>
<li>giotto_halley</li>
<li>lspn_comet_halley1</li>
<li>hst_pluto_charon</li>
</ul>
<p>These image are from NASA. See:<br>
http://spaceplace.jpl.nasa.gov/en/ed...s_images.shtml
</p>
<script type="text/javascript">
// Fill in the default image. I am too lazy to type in the
// full path name.

dothisnow('Apollo17_Earth');

// Best to put the images at the end.
var selimage = new Image();
selimage.src = nasaPath + "Apollo17_Earth_T.jpg";

var selimage = new Image();
selimage.src = nasaPath + "clem_full_moon_T.jpg";

var selimage = new Image();
selimage.src = nasaPath + "erosreconstruct_near_T.jpg";

var selimage = new Image();
selimage.src = nasaPath + "giotto_halley_T.jpg";

var selimage = new Image();
selimage.src = nasaPath + "lspn_comet_halley1_T.jpg";

var selimage = new Image();
selimage.src = nasaPath + "hst_pluto_charon_T.jpg";

</script>
</body>
</html>
Jul 23 '05 #4

P: n/a
You are the best!!!!!!!
It works exactly as I needed!!!!!
I customized a little and voila all up and running!!!

Thank YOU thankyou THANK you THANKYOU!!!

oh.....and I learned a lot too.......
about syntax and the proper way to call an elementbyid and such.....

thank you so much

sd
we*******@computerholistics.com
Jul 23 '05 #5

P: n/a
"SPEAKIT" <SP*****@speaknet.net> wrote in message news:<QS*******************@bignews3.bellsouth.net >...

thank you so much


Glad to get the positive feedback.

Robert
Jul 23 '05 #6

This discussion thread is closed

Replies have been disabled for this discussion.