Html Input Attribute for Extra Information
Hi Experts,
Is there an attribute in html input tag where you can store some extra information. In VB I know this attribute is actually called tag
In HTML/JavaScript, this is my goal: I have a lot of input elements, where I need to do some calculations based on user input - a calculator if you will, with rates, quantity, etc. so in my JS I am doing total = rates x quantity, simple.
Where my extra information needs to come in is that for this particular example I will have 18 user input fields, and this extra info would simply be the text box's name in a human description, opposed to txtFamQty, but it will be Family Quantity, which I can use in an alert to inform the user what textbox to fix. Also, not every textbox will have an association label because the textboxes will be in a table, identified by the column and row headings.
Thank you
Is there an attribute in html input tag where you can store some extra information. In VB I know this attribute is actually called tag
In HTML/JavaScript, this is my goal: I have a lot of input elements, where I need to do some calculations based on user input - a calculator if you will, with rates, quantity, etc. so in my JS I am doing total = rates x quantity, simple.
Where my extra information needs to come in is that for this particular example I will have 18 user input fields, and this extra info would simply be the text box's name in a human description, opposed to txtFamQty, but it will be Family Quantity, which I can use in an alert to inform the user what textbox to fix. Also, not every textbox will have an association label because the textboxes will be in a table, identified by the column and row headings.
Thank you
Dave Baldwin
Not in standard HTML/JavaScript that I know of. There are some libraries that can add data attributes to elements. On one set of pages that I maintain, the validation routine goes thru the elements that are checked and if there is a problem, it puts up an alert with the message and then it puts the 'focus' on that element which takes the user directly to the element that needs attention.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
what do you mean:
Of course the down side to that is the page can be scrapped if you have a lot of data.
ASKER
With your example I came up with the code below, but my end result is Undefined with 12 value. so, my "data" is not being read.
<!DOCTYPE html>
<html>
<head>
<title>Scott Q_28656011</title>
</head>
<body>
<input name="qty" data="This is qty" onChange="changed(this);">
<script type="text/javascript">
function changed(element){
var qty = element.value;
var data = element.data;
alert (data + ' with ' + qty + ' value.');
}
</script>
</body>
</html>
If you have a lot of data that people want, they can write a script to read your rendered html. This is called scraping.
One way to prevent that is to use ajax and grab only when needed. If you are not using a big list of data I wouldn't worry about it.
One way to prevent that is to use ajax and grab only when needed. If you are not using a big list of data I wouldn't worry about it.
ASKER
I am not worry about that, but why isnt my code working?
ASKER
Got it!
<!DOCTYPE html>
<html>
<head>
<title>Scott Q_28656011</title>
</head>
<body>
<input name="qty" data-type="This is qty" onChange="changed(this);">
<script type="text/javascript">
function changed(element){
var qty = element.value;
var data = element.dataset.type;
alert (data + ' with ' + qty + ' value.');
}
</script>
</body>
</html>