Can I use the value of alt= in img src to fill out the Item# field in an order form?

Question

I'm trying to find a very simple way to have users click a picture that links to an order form and will autofill the item number. I'm very new when it comes to html coding. I have the order form linked just need a good way to auto fill the item number based off the picture the user clicked.

Html webpage

<section id="Desk"><H1>Desks</h1><h3>Click an image to claim the item</h3></section> <font size="4"><a href="file://csd1/Public/MandR/Order%20Form.htm">
<img src= "file://csd1/Public/MandR/InventoryPictures/InDatabase/1115.jpg" alt="1115" width="300" height="300">

Order form

Please enter item #:
<input type="text" style= background-color:#BFC9CA name="Item#"><br>

I'm sorry this is very ugly coding. Please let me know if there is anything else that could help clear this up. I'm just trying to create a local host site for employees to see old office furniture that could be reused. — Lusklogic, Dec 31 '18 at 18:25
I would look into using query parameters to pass the ID: https://stackoverflow.com/questions/15653554/get-the-query-string-value-and-display-it-in-my-html-page — Joel Brewer, Dec 31 '18 at 18:37
Is the order form on the same page where the image is clicked? If so.. are there other items on the same page too? What if user clicks on more than one item/image? — Nawed Khan, Dec 31 '18 at 18:51
What you're doing is okay, but you may want to use ref="1115" instead of the alt property, and target it with img[ref="1115"]. The alt attribute has a specific use (https://www.w3schools.com/tags/att_img_alt.asp). — Eric Vautier, Dec 31 '18 at 18:54
@NawedKhan When user clicks an image it takes them to an order form on a different page. So only 1 item at a time. Once on order form there are only 4 fields (item#, Budget, Location, comments) I really just need item# filled out based off the picture clicked which I name with the inventory number. When user clicks submit it will e-mail me so I can transfer the item to their budget. — Lusklogic, Dec 31 '18 at 19:00
@EricVautier Thank you Eric I didn't realize that was the case. — Lusklogic, Dec 31 '18 at 19:02
Use `input type="image"` and then use `formaction` to pass your id: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/image — Asons, Dec 31 '18 at 19:24

Tom O. · Answer 1 · 2018-12-31T19:11:16.117

You just need to add an click event listener to your img element via addEventListener. If you have multiple images you should probably implement some sort of event delegation, this way only 1 event handler has to be added to take care of all img click events, instead of having to add an event listener on each and every img. This works because a click event will bubble outwards (to it's ancestor elements). Below is a simple implementation of what I've described. I've modified your code a bit, but not much (added a few additional images and removed the image src attribute urls:

const textEl = document.querySelector('#textEl');

//Delegate all events to the parent container:
document.querySelector('#imgContainer').addEventListener('click', function(e) {
  if (e.target.tagName === 'IMG') {
    textEl.value = e.target.alt;
  }
  e.stopPropagation(); //<-- Prevent further bubbling 
});

Please enter item #:
<input id="textEl" type="text" style="background-color:#BFC9CA;" name="Item#"><br />

<section id="Desk">
  <h1>Desks</h1>
  <h3>Click an image to claim the item</h3>
</section>

<div id="imgContainer">
  <img class="imageEl" src="#" alt="1115" width="300" height="300" />

  <img class="imageEl" src="#" alt="1116" width="300" height="300" />

  <img class="imageEl" src="#" alt="1117" width="300" height="300" />
</div>

Also, I would definitely advise against using the alt attribute of your img to store important data. Look into using data-# attributes as an alternative.

Erik Philips · Answer 2 · 2018-12-31T19:23:17.143

I'm trying to find a very simple way to have users click a picture that links to an order form and will autofill the item number.

Recommended Reading: Decoupling Your HTML, CSS, and JavaScript.

I'm going to assume the order form is on the same page as the picture (since you haven't specified).

let work on getting click to work using jQuery. Other things like src with be excluded for brevity.

<img class="js-formfill-item" />
<img class="js-formfill-item" />
<img class="js-formfill-item" />
<div><input type="text" name="ItemNumber"></div>

Now we have a way to target one or more items that, as the class describes, can fill in a form. Next we wire-up jQuery to wait for the entire dom to be ready and wire up a click event.

$(document).ready(() => {
  $('.js-formfill-item').on('click', (event) => {
  });
});

I would highly recommend not using the alt tag to store data as it does have it's own purpose that is not related to Item Number. I prefer to lousy-couple my jQuery as possible, so to target an element we simply add a user-defined data attribute I prefer to name the attribute target to target the input element. Additionally I'd use another data attribute it store it's item number.

    $(document).ready(() => {
      $('.js-formfill-item').on('click', (e) => {
        // e.currentTarget will be the html element clicked that has the class .js-formfill-item
        // we wrap it with $() to use it with jQuery
        var $this = $(e.currentTarget);

        var target = $this.data('target');
        var itemid = $this.data('itemid');

        $(target).val(itemid);
      });
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img class="js-formfill-item" 
     data-target=".js-formfill-input" 
     data-itemid="1" 
     src="https://via.placeholder.com/50"/>
<img class="js-formfill-item" 
     data-target=".js-formfill-input" 
     data-itemid="2" 
     src="https://via.placeholder.com/50"/>
<img class="js-formfill-item" 
     data-target=".js-formfill-input" 
     data-itemid="3" 
     src="https://via.placeholder.com/50"/>
<div>
  <input class="js-formfill-input" type="text" name="ItemNumber">
</div>

score 0 · Answer 3 · answered Dec 31 '18 at 19:13

Using the data- attribute would be more appropriate than the alt because alt should be used for explaining what the image is in case the image doesn't load. Adding the following jQuery should update the text box upon clicking the image.

$('img').click(function(){
    var pictureId = $(this).data("pictureid");
   $('input').val(pictureId);
});

Your example, with minor syntax updates, would look like this:

<!--If jQuery is not included add the following-->
<!--
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js></script>
</head>
-->

<section id="Desk">
   <h1>Desks</h1>
   <h3>Click an image to claim the item</h3>
</section> 

<font size="4">
<a href="file://csd1/Public/MandR/Order%20Form.htm"> 
<img src= "file://csd1/Public/MandR/InventoryPictures/InDatabase/1115.jpg" alt="inventory item" width="300" height="300" data-pictureid="115">

Order form
Please enter item #:<br />
<input type="text" style= background-color:#BFC9CA name="Item#"><br />

<script>
$(document).ready(function(){
    $('img').click(function(){
        var pictureId = $(this).data("pictureid");
       $('input').val(pictureId);
    });
});
</script>

Can I use the value of alt= in img src to fill out the Item# field in an order form?

3 Answers3