Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    Nov 2010
    Posts
    390
    Thanks
    48
    Thanked 1 Time in 1 Post

    Question How can I show image using Variables?

    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

  • #2
    Regular Coder
    Join Date
    Apr 2012
    Posts
    165
    Thanks
    1
    Thanked 39 Times in 39 Posts
    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>
    Last edited by EpicWebDesign; 07-09-2012 at 10:35 PM. Reason: added sample mock-up code

  • Users who have thanked EpicWebDesign for this post:

    MrTIMarshall (07-12-2012)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •