Can I use the value of alt= in img src to fill out the Item# field in an order form?
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>
javascript jquery html
edited Dec 31 '18 at 18:39
abney317
2,31231738
asked Dec 31 '18 at 18:23
LusklogicLusklogic
1
|
show 3 more comments
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>
javascript jquery html
edited Dec 31 '18 at 18:39
abney317
2,31231738
asked Dec 31 '18 at 18:23
LusklogicLusklogic
1
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
1
I would look into using query parameters to pass the ID: stackoverflow.com/questions/15653554/…
– Joel Brewer
Dec 31 '18 at 18:37
@JoelBrewer Thank you I will look at this.
– Lusklogic
Dec 31 '18 at 18:38
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 (w3schools.com/tags/att_img_alt.asp).
– Eric Vautier
Dec 31 '18 at 18:54
|
show 3 more comments
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>
javascript jquery html
edited Dec 31 '18 at 18:39
abney317
2,31231738
asked Dec 31 '18 at 18:23
LusklogicLusklogic
1
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>
javascript jquery html
javascript jquery html
edited Dec 31 '18 at 18:39
abney317
2,31231738
asked Dec 31 '18 at 18:23
LusklogicLusklogic
1
edited Dec 31 '18 at 18:39
abney317
2,31231738
asked Dec 31 '18 at 18:23
LusklogicLusklogic
1
edited Dec 31 '18 at 18:39
abney317
2,31231738
edited Dec 31 '18 at 18:39
abney317
2,31231738
edited Dec 31 '18 at 18:39
abney317
2,31231738
2,31231738
asked Dec 31 '18 at 18:23
LusklogicLusklogic
1
asked Dec 31 '18 at 18:23
LusklogicLusklogic
1
asked Dec 31 '18 at 18:23
LusklogicLusklogic
1
1
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
1
I would look into using query parameters to pass the ID: stackoverflow.com/questions/15653554/…
– Joel Brewer
Dec 31 '18 at 18:37
@JoelBrewer Thank you I will look at this.
– Lusklogic
Dec 31 '18 at 18:38
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 (w3schools.com/tags/att_img_alt.asp).
– Eric Vautier
Dec 31 '18 at 18:54
|
show 3 more comments
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
1
I would look into using query parameters to pass the ID: stackoverflow.com/questions/15653554/…
– Joel Brewer
Dec 31 '18 at 18:37
@JoelBrewer Thank you I will look at this.
– Lusklogic
Dec 31 '18 at 18:38
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 (w3schools.com/tags/att_img_alt.asp).
– Eric Vautier
Dec 31 '18 at 18:54
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'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
1
1
I would look into using query parameters to pass the ID: stackoverflow.com/questions/15653554/…
– Joel Brewer
Dec 31 '18 at 18:37
I would look into using query parameters to pass the ID: stackoverflow.com/questions/15653554/…
– Joel Brewer
Dec 31 '18 at 18:37
@JoelBrewer Thank you I will look at this.
– Lusklogic
Dec 31 '18 at 18:38
@JoelBrewer Thank you I will look at this.
– Lusklogic
Dec 31 '18 at 18:38
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
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 (w3schools.com/tags/att_img_alt.asp).
– Eric Vautier
Dec 31 '18 at 18:54
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 (w3schools.com/tags/att_img_alt.asp).
– Eric Vautier
Dec 31 '18 at 18:54
|
show 3 more comments
3 Answers
3
active
oldest
votes
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.
answered Dec 31 '18 at 19:00
Tom O.Tom O.
2,42821325
add a comment |
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>
answered Dec 31 '18 at 19:13
hiltononlinehiltononline
964
add a comment |
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>answered Dec 31 '18 at 19:11
Erik PhilipsErik Philips
41k691124
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53990364%2fcan-i-use-the-value-of-alt-in-img-src-to-fill-out-the-item-field-in-an-order-f%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
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.
answered Dec 31 '18 at 19:00
Tom O.Tom O.
2,42821325
add a comment |
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.
answered Dec 31 '18 at 19:00
Tom O.Tom O.
2,42821325
add a comment |
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.
answered Dec 31 '18 at 19:00
Tom O.Tom O.
2,42821325
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.
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>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>answered Dec 31 '18 at 19:00
Tom O.Tom O.
2,42821325
edited Dec 31 '18 at 19:11
answered Dec 31 '18 at 19:00
Tom O.Tom O.
2,42821325
answered Dec 31 '18 at 19:00
Tom O.Tom O.
2,42821325
answered Dec 31 '18 at 19:00
Tom O.Tom O.
2,42821325
2,42821325
add a comment |
add a comment |
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>
answered Dec 31 '18 at 19:13
hiltononlinehiltononline
964
add a comment |
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>
answered Dec 31 '18 at 19:13
hiltononlinehiltononline
964
add a comment |
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>
answered Dec 31 '18 at 19:13
hiltononlinehiltononline
964
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>
answered Dec 31 '18 at 19:13
hiltononlinehiltononline
964
answered Dec 31 '18 at 19:13
hiltononlinehiltononline
964
answered Dec 31 '18 at 19:13
hiltononlinehiltononline
964
answered Dec 31 '18 at 19:13
hiltononlinehiltononline
964
964
add a comment |
add a comment |
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>answered Dec 31 '18 at 19:11
Erik PhilipsErik Philips
41k691124
add a comment |
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>answered Dec 31 '18 at 19:11
Erik PhilipsErik Philips
41k691124
add a comment |
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>answered Dec 31 '18 at 19:11
Erik PhilipsErik Philips
41k691124
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> $(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> $(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>answered Dec 31 '18 at 19:11
Erik PhilipsErik Philips
41k691124
edited Dec 31 '18 at 19:23
answered Dec 31 '18 at 19:11
Erik PhilipsErik Philips
41k691124
answered Dec 31 '18 at 19:11
Erik PhilipsErik Philips
41k691124
answered Dec 31 '18 at 19:11
Erik PhilipsErik Philips
41k691124
41k691124
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53990364%2fcan-i-use-the-value-of-alt-in-img-src-to-fill-out-the-item-field-in-an-order-f%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
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
1
I would look into using query parameters to pass the ID: stackoverflow.com/questions/15653554/…
– Joel Brewer
Dec 31 '18 at 18:37
@JoelBrewer Thank you I will look at this.
– Lusklogic
Dec 31 '18 at 18:38
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 (w3schools.com/tags/att_img_alt.asp).
– Eric Vautier
Dec 31 '18 at 18:54