Improve company productivity with a Business Account.Sign Up

x
?
Solved

Custom Attribute Javascript Loop trough elements.

Posted on 2010-08-20
9
Medium Priority
?
691 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 83

Expert Comment

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

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
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
LVL 83

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
 
LVL 83

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 83

Accepted Solution

by:
leakim971 earned 1000 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 83

Expert Comment

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

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
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…

601 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