?
Solved

Dynamic Div Element Name and its usage

Posted on 2013-06-13
10
Medium Priority
?
229 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
  • 2
10 Comments
 
LVL 58

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
Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

 
LVL 58

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

Get real performance insights from real users

Key features:
- Total Pages Views and Load times
- Top Pages Viewed and Load Times
- Real Time Site Page Build Performance
- Users’ Browser and Platform Performance
- Geographic User Breakdown
- And more

Question has a verified solution.

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

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
This article discusses how to implement server side field validation and display customized error messages to the client.
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

762 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