Solved

Custom Attribute Javascript Loop trough elements.

Posted on 2010-08-20
9
637 Views
Last Modified: 2013-11-11
So i have this code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
</head>
<body>
<form name="formtab1" id="formtab1">
  <select name="ZoneDropdown" id="ZoneDropdown" onchange="DisplayFormValues()" class="dropdown">
    <option value="" title="">Please Select</option>
    <option value="BLP" title="POLOB" price="5.0000">BLP</option>
  </select>
  <select name="LogoDropdown" id="LogoDropdown" onchange="DisplayFormValues()" class="dropdown">
    <option value="vv" title="tester" price="2.0000">Please Select</option>
    <option value="BLP" title="POLO" price="5.0000">BACK</option>
  </select>
  <input id="AddEmb" name="AddEmb" type="text" />
</form>
<script type="text/javascript">
function DisplayFormValues() { var str = '';
var elem = document.getElementById('formtab1').elements;
for(var i = 0; i < elem.length; i++) { str += elem[i].value };       <----------- I need elem[i].price not value |
		document.getElementById('AddEmb').value = str;
}

function on()
   {
   var w = document.formtab1.ZoneDropdown.selectedIndex;
   var selected_text = document.formtab1.ZoneDropdown[document.formtab1.ZoneDropdown.selectedIndex].getAttribute('price');
   alert(selected_text);
   }
</script>
</body>
</html>

Open in new window


I have multiple dropdowns, mu goal is to sum up the Custom Attribute "Price". But i cannot get the attribute to pull up the value. While example function "on" works. When i do it inside a loop it fails.

I tried:
 elem[i].price, elem[i].getAttribute('price') 

Open in new window

and a bunch of things but nothing worked for me.

Thanks
0
Comment
Question by:uniformer
  • 6
  • 3
9 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 33490189
use : elem[i].getAttribute("price");
0
 
LVL 82

Expert Comment

by:leakim971
ID: 33490191
better(?) :  parseFloat(    elem[i].getAttribute("price")     );
0
 

Author Comment

by:uniformer
ID: 33491837
[code]use : elem[i].getAttribute("price");[/code]

I tried this in this

[code]for(var i = 0; i < elem.length; i++) { str += elem[i].value };[/code]

But the result not good. My whole goal in this loop is instead of
[code] elem[i].value [/code]

to get the Custom Atribute price.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 33491843
You said : mu goal is to sum up the Custom Attribute "Price"

So :


str = 0;
for(var i = 0; i < elem.length; i++) { str += elem[i].getAttribute("price"); };

Open in new window

0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 82

Expert Comment

by:leakim971
ID: 33491845
Or better(?) :


str = 0;
for(var i = 0; i < elem.length; i++) { str += parseFloat(elem[i].getAttribute("price")); };

Open in new window

0
 

Author Comment

by:uniformer
ID: 33492004
[code]
function DisplayFormValues() { var str = '0';
var elem = document.getElementById('formtab1').elements;
str = 0;
for(var i = 0; i < elem.length; i++) { str += parseFloat(elem[i].getAttribute("price")); };
document.getElementById('AddEmb').value = str;
}
[/code]

This code gives me "NaN" when testing.

[code]
function DisplayFormValues() { var str = '0';
var elem = document.getElementById('formtab1').elements;
str = 0;
for(var i = 0; i < elem.length; i++) { str += elem[i].getAttribute("price"); };
document.getElementById('AddEmb').value = str;
}
[/code]

This code gives me "0"

Am i doing something wrong?

Thanks
0
 
LVL 82

Accepted Solution

by:
leakim971 earned 250 total points
ID: 33492099
Check this :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<script type="text/javascript">
	function DisplayFormValues() {
		var str = 0;
		var elem = document.getElementById('formtab1').elements;
		for(var i=0;i<elem.length;i++) {
			if(elem[i].tagName.toLowerCase() == "select") {
				var price = elem[i].options[elem[i].selectedIndex].getAttribute("price");
				str += (price)?parseFloat(price):0;
			}
			else {
				var price = elem[i].getAttribute("price");
				str += (price)?parseFloat(price):0;
			}
		}
		document.getElementById('AddEmb').value = "$" + str.toFixed(2);
	}
	
	function on() {
		var w = document.formtab1.ZoneDropdown.selectedIndex;
		var selected_text = document.formtab1.ZoneDropdown[document.formtab1.ZoneDropdown.selectedIndex].getAttribute('price');
		alert(selected_text);
	}
</script>
</head>
<body>
<form name="formtab1" id="formtab1">
    <select name="ZoneDropdown" id="ZoneDropdown" onchange="DisplayFormValues();" class="dropdown">
        <option value="" title="">Please Select</option>
        <option value="BLP" title="POLOB" price="5.0000">BLP</option>
    </select>
    <select name="LogoDropdown" id="LogoDropdown" onchange="DisplayFormValues();" class="dropdown">
        <option value="vv" title="tester" price="2.0000">Please Select</option>
        <option value="BLP" title="POLO" price="5.0000">BACK</option>
    </select>
    <input id="AddEmb" name="AddEmb" type="text" />
</form>
</body>
</html>

Open in new window

0
 

Author Comment

by:uniformer
ID: 33492313
Yep! Thats it... I guess i was doing a few things wrong.. Thanks
0
 
LVL 82

Expert Comment

by:leakim971
ID: 33492388
You're welcome! Thanks for the points!
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

708 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now