How can I show image using Variables?

MrTIMarshall · 07-09-2012, 12:35 PM

Hello,

I am making a multi-step form where the first step answers are used to:

1). Display an image, I have the link displayed but don't know how t show the image in my html...

Code:

		'http://www.domain.com/image/items/' + $('#Category').val() + '/' + $('#Sub_Category').val() + '/' + $('#Item_Num').val() + '.jpg',

This is the main question however I thought I'd ask another instead of creating loads of threads :P

2). Check if this image is there, if not it shows div b instead of div a
3). If it's the wrong image, the admin uploads the image and it automatically gets saved under that url path.

Sorry, I'm a newbie in JavaScript, still learning but getting the hang of things with my previous programming experiences so sorry if I haven't explained myself properly. Thank you for any help and/or advice in advanced.

Best Regards,
Tim

EpicWebDesign · 07-09-2012, 09:53 PM

Can you post the whole javascript and associated HTML code? It's much easier to nail down your problem if we can see what you are working with in it's entirety.

One thing I did note is that you are using single quotes to display the text, but also within the variable names themselves. Not sure if this is causing the script to fail at that point. Maybe/Maybe not, but if you can post more, it would be great.

This is just a very simple mock-up I threw together so you can get an idea of how to go about your original question (getting the image to display). Obviously it's using very basic javascript so you'll want to tweak it to fit your needs, but it does the basic job:

Code:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<body >
<form>
<input type=text id="Category" value="Shoes">
<input type=text id="Sub_Category" value="Heels">
<input type=text id="Item_Num" value="1234">

              <input type="button" value="Get Image" onclick="showImage();"><br />
<span id=item_image></span>
       </form>   
<script>
function showImage() {
var category = document.getElementById('Category').value;
var subcategory = document.getElementById('Sub_Category').value;
var itemnum = document.getElementById('Item_Num').value;

url = "<img src=http://www.domain.com/image/items/" + category + "/" + subcategory + "/" + itemnum + ".jpg>";
item_image.innerHTML= url;
alert (url); //just for testing purposes to show you it actually outputs the data correctly
}
</script>
</body>
</html>