?
Solved

Dynamic Div Element Name and its usage

Posted on 2013-06-13
10
Medium Priority
?
236 Views
Last Modified: 2013-06-14
I have the following code: the generated html below:

<tr>
  	<td><input type="checkbox" name="getFile" id="getFile" value="1" /></td>
    <td><div id="projectsList1" style="width:500px;height:60px;overflow-y:scroll;border:1px solid gray;"></div><input type="hidden" name="projectIDS1" id="projectIDS1" value="" /><input type="hidden" name="countProj1" id="countProj1" value="" /></td>
    <td><a href="javascript:void(0);" onclick="openWindow(1);">Files</a></td>
  </tr>
  
  <tr>
  	<td><input type="checkbox" name="getFile" id="getFile" value="2" /></td>
    <td><div id="projectsList2" style="width:500px;height:60px;overflow-y:scroll;border:1px solid gray;"></div><input type="hidden" name="projectIDS2" id="projectIDS2" value="" /><input type="hidden" name="countProj2" id="countProj2" value="" /></td>
    <td><a href="javascript:void(0);" onclick="openWindow(2);">Files</a></td>
  </tr>
  
  <tr>
  	<td><input type="checkbox" name="getFile" id="getFile" value="3" /></td>
    <td><div id="projectsList3" style="width:500px;height:60px;overflow-y:scroll;border:1px solid gray;"></div><input type="hidden" name="projectIDS3" id="projectIDS3" value="" /><input type="hidden" name="countProj3" id="countProj3" value="" /></td>
    <td><a href="javascript:void(0);" onclick="openWindow(3);">Files</a></td>
  </tr>
  
  <tr>
  	<td><input type="checkbox" name="getFile" id="getFile" value="4" /></td>
    <td><div id="projectsList4" style="width:500px;height:60px;overflow-y:scroll;border:1px solid gray;"></div><input type="hidden" name="projectIDS4" id="projectIDS4" value="" /><input type="hidden" name="countProj4" id="countProj4" value="" /></td>
    <td><a href="javascript:void(0);" onclick="openWindow(4);">Files</a></td>
  </tr>
  
  <tr>
  	<td><input type="checkbox" name="getFile" id="getFile" value="5" /></td>
    <td><div id="projectsList5" style="width:500px;height:60px;overflow-y:scroll;border:1px solid gray;"></div><input type="hidden" name="projectIDS5" id="projectIDS5" value="" /><input type="hidden" name="countProj5" id="countProj5" value="" /></td>
    <td><a href="javascript:void(0);" onclick="openWindow(5);">Files</a></td>
  </tr>

Open in new window


now as you see the name of the input and div id are from 1 to 5 and they can extend more:

I am using the following function to trying to get the dynamic ID of the div or input fields

function GetElementsStartingWith(tagName, subString) {
    var elements = document.getElementsByTagName(tagName);
    var result = [];
    for (var i = 0; i < elements.length; i++) {
        var element = elements[i];
        if (element.id && element.id.substr(0, subString.length) == subString) {
            result.push(element);
        }
    }
    return result;
}

Open in new window


and then doing this

Test = function(str,divID) 
{
	var arrID = new Array();
	arrID = str.split(',');                  
	arrID = eliminateDuplicates(arrID);                 
	var theDiv = GetElementsStartingWith("div", "projectsList");
//document.getElementById('projectsList'); 
	var cmp=GetElementsStartingWith("input", "projectIDS");
	var cmp = cmp.value;
//document.getElementById("projectIDS").value;			
	var cntPrj = GetElementsStartingWith("input", "countProj");
	alert(cntPrj.value);
}

Open in new window


but i am getting an error

TypeError: cntPrj.value is undefined
[Break On This Error]       

if(cntPrj.value.length == 0)
0
Comment
  • 4
  • 3
  • 2
9 Comments
 
LVL 60

Expert Comment

by:Julian Hansen
ID: 39244200
Why not use a custom user data attribute

<div id="projectsList5" data-id="5">

You can then access the id directly.

The data- for custom fields was introduced as part of HTML5 - makes it a lot easier to store date like id's you want to relate to your elements.
0
 
LVL 16

Author Comment

by:Gurpreet Singh Randhawa
ID: 39244232
i get it but i am using IE 7 and probably i cannot use data-id
0
 
LVL 22

Expert Comment

by:Kim Walker
ID: 39244508
It's because cntPrj is an array of input elements. The GetElementsStartingWith function returns an array of elements whose ids start with a particular string.

By the way, you have several checkbox elements with the same id. Although they need the same name to form a checkbox group, they must have independent id values. Perhaps you can append a sequence number to the ids but leave the names without.
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 60

Expert Comment

by:Julian Hansen
ID: 39244942
i get it but i am using IE 7

I have to ask - why?????
I would have to ask why for IE8 as well - in fact why IE at all.

Anyway - you can retrieve custom attributes in IE7 - it is from a Validation perspective that HTML5 allows this and attempts to standardise it.

Use getAttribute

http://stackoverflow.com/questions/2412947/do-html5-custom-data-attributes-work-in-ie-6
0
 
LVL 22

Assisted Solution

by:Kim Walker
Kim Walker earned 600 total points
ID: 39245002
The array that is returned by the GetElementsStartingWith function does not have a "value" property. It does contain several input elements each of which does have a value property. You would need to loop through the elements in that array and alert the value property of each element, not the value property of the array. Try:
Test = function(str,divID) 
{
	var arrID = new Array();
	arrID = str.split(',');                  
	arrID = eliminateDuplicates(arrID);                 
	var theDiv = GetElementsStartingWith("div", "projectsList");
//document.getElementById('projectsList'); 
	var cmp=GetElementsStartingWith("input", "projectIDS");
	var cmp = cmp.value;
//document.getElementById("projectIDS").value;			
	var cntPrj = GetElementsStartingWith("input", "countProj");
	for (var i = 0; i < cntPrj.length; i++) {
		alert(cntPrj[i].value);
	}
}

Open in new window

0
 
LVL 16

Accepted Solution

by:
Gurpreet Singh Randhawa earned 0 total points
ID: 39246800
see this: my Complete Function, how i can try fixing that here, i am lost here

Test= function(str) 
{
	var arrID = new Array();
	arrID = str.split(',');                  
	arrID = eliminateDuplicates(arrID);                 
	//var theDiv = document.getElementById('projectsList'); 
	//var cmp=document.getElementById("projectIDS").value;	
	var cntPrj = GetElementsStartingWith("input", "countProj");
	for (var i = 0; i < cntPrj.length; i++) {
		alert(cntPrj[i].value);
	}	
	return;	
	var cproj;
		if(document.getElementById("countProj").value.length == 0)
			cproj=0;
		else
		 cproj=parseInt(document.getElementById('countProj').value);
	 
	for (var j=0; j<arrID.length; j++)
	{  
		if (parseInt(cproj) + 1 > 50)
		{ 
			alert("You cannot add more than 50 Project id's ");
			return;
		}
		if( cmp!="" && cmp.indexOf(arrID[j])!=-1)
		continue;
        var newNode = document.createElement('div');  
        newNode.style.cssText = "background:#CCCCCC;border:1px solid #666666;width:100px;word-wrap:break-word;margin:3px;float:left;color:black;text-decoration:none!important;height:auto;vertical-align:middle;padding-top:2px;";    
        newNode.title = arrID[j]+" ";
        newNode.innerHTML = '<input type=hidden name=Proj_' + j + ' ' + 'value=' + arrID[j] + '>' + arrID[j] + ' <a href="#" title="Remove Project" onclick="removetext($(this).parent());"><b>X</b></a>';   
        theDiv.appendChild(newNode);
		if(document.getElementById("projectIDS").value.length == 0) 
			{
				document.getElementById("projectIDS").value=arrID[j]
			}
		else
			{
				document.getElementById("projectIDS").value = document.getElementById("projectIDS").value+","+arrID[j];
			}
			cproj = parseInt(cproj)+1;	
		document.getElementById("countProj").value =cproj; 
	}  
}

Open in new window

0
 
LVL 16

Author Comment

by:Gurpreet Singh Randhawa
ID: 39247403
I've requested that this question be closed as follows:

Accepted answer: 0 points for myselfrandhawa's comment #a39246800
Assisted answer: 150 points for xmediaman's comment #a39245002

for the following reason:

Thanks for the guidance but i have solved it the other way

Cheers
0
 
LVL 22

Expert Comment

by:Kim Walker
ID: 39247404
The original question
but i am getting an error

TypeError: cntPrj.value is undefined
was answered in that the variable cntPrg held an array which didn't have a value property. The author changed the question completely after the original question was answered.
0
 
LVL 22

Expert Comment

by:Kim Walker
ID: 39247415
Now I'm confused. After I objected, a new comment appeared that said I was to have been given credit for an assist. I didn't see this before. I would like to withdraw my objection.
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
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…
Suggested Courses

850 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