[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

Dynamic Div Element Name and its usage

Posted on 2013-06-13
10
Medium Priority
?
233 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 59

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
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.

 
LVL 59

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

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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…

649 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