...

View Full Version : document.getElementById



Tony Davis
10-21-2005, 05:39 PM
This is probably WAY off base, but I am trying to avoid hard-coding field names in a table, all checkboxes, and validate that at least one has been selected. I thought that maybe this would work to use document.getElementById. I dont think this is possible, or is it? Do I need to create a table with all the form field names? Or, can I reference the fields within the id?

Thanks!
-tdavis

function valForm(frm)
{

var parent = "group1"; //name of table id
var items = 28; //number of items in group
var nc = 0;
for (i=0; i<items; i++) {
if (document.getElementById(parent).checked == true) {
nc++;
}
}

if (nc==0) {
alert("No selections made!");
return;
}

//No errors
frm.submit();
}

_Aerospace_Eng_
10-21-2005, 05:44 PM
What does your html look like?

Tony Davis
10-21-2005, 05:50 PM
Nothing special.
Here is a portion of it.

<table id="group1" width="690" border="0" cellspacing="1" cellpadding="1">
<tr>
<td><font size="1"><input type="checkbox" name="choice_1" value="Yes"></font></td>
<td><font size="1"><input type="checkbox" name="choice_2" value="Yes"></font></td>
</tr></table>

Tony Davis
10-21-2005, 05:54 PM
one more thing that you might need to know:

<a onclick="valForm(document.forms['pagefour']);return CSClickReturn()" href="#"><img src="images/button_right_arrow.gif" alt="Click to advance to next page" name="mySubmit" width="50" height="50" border="0"></a>

Pyth007
10-21-2005, 06:52 PM
As written, it'll probably toss an error of incorrect method... You are basically asking if the table is checked, not the checkboxes in the table...
What you could do is loop through the checkboxes in the table to see if they're checked...


function valForm(frm)
{
var parent = "group1"; //name of table id <- You may also want this as a param passed into the function if you have multiple tables
// var items = 28; won't need this line... We'll calc this later...
var nc = true; // I like boolean better, unless you need the count; I'm assuming nc means noCheck

// Get a collection of <input> elements inside your table
// you could also do document.frm... or even document... (without and other directions) depending upon what else your page contains.
var tableStuff=document.parent.getElementsByTagName('input');
for(var counter=0; counter<tableStuff.length; counter++)
{
// Check if <input> item is of type 'checkbox' and see if its checked
if ((tableStuff[counter].type=='checkbox') && (tableStuff[counter].checked))
nc=false; // If so, nc (noCheck) is set to false
}
if (nc)
{
alert("No selections made!");
return false; // You could put this function on the form's onSubmit and just "return true" as the last step
}
//No errors
frm.submit();
}


BTW: getElementsByTagName gets a collection, not a true array... You can still access it like an array via the key-notation (eg arrayName[key]), but other array-specific functions won't work (eg sort(), next(), etc.)

Tony Davis
10-21-2005, 07:27 PM
In this statement: var tableStuff=document.parent.getElementsByTagName('input'); does parent refer to the table name? How is the form name referenced? I am getting an error that document.parent is not an object. Also, does ('input') refer to the individual form field names?

thanks for your help!
-tdavis

Pyth007
10-21-2005, 07:59 PM
Yeah... parent was supposed to reference the table, but I guess it's not "strong" enough of a reference to get it through document alone in dot-notation... If the checkboxes you want to validate are the only ones on the page, then just go with "document.getElementsByTagName('input')" (I usually just do it this way instead of trying to "dig down" via dot-notation.

As for your other question, getElementsByTagName('tagname') returns a collection of elements having that html tag reference... since checkboxes are made by: "<input type='checkbox'>", getElementsByTagName('input') will retrieve all <input> tagged elements. This means the collection will contain not only the desired checkboxes, but also any other <input> elements, like text, hidden, radio, button, image, submit, cancel etc. This is why when going through the collection in the for-loop, we needed to check to see if the type=='checkbox'. You could similarly use this function to get paragraphs <p> by getElementsByTagName('p').

There is also another function, getElementById('idname') that will retrieve one specific element given the id of said element ( note that there is no 's' after Element in the function name! ). So one way of including the table into that line that was giving you trouble, you could write:
"document.getElementById(parent).getElementsByTagName('input')", but unless you need to specify the elements in this table and not some other elements outside the table, there would be no need to do it this way.
Note also that specific tag names or id's need to be written as a string (with quotes around them); without quotes references the variable.

Tony Davis
10-21-2005, 08:12 PM
There are other checkboxes on the page that have separate validation logic. The code below works, but for ALL the checkboxes. I am trying to find a way to limit the "choose at least one" rule just for those in the table. That is why I thought naming the table would provide that somehow.

I really appreciate your help!
Lots of great information (I am just learning this crazy language!)
-tdavis



for (i = 0; i < document.pagefour.length; i++) {
if (document.pagefour[i].type == "checkbox" && document.pagefour[i].checked==true){
count++;
break
}
}

if (count==0) {
alert("No selections were made!");
return;
}

Pyth007
10-21-2005, 08:19 PM
then try:
"document.getElementById('tableid').getElementsByTagName('input')" to specify only those in the table.

Another possibility... if you do not need to get these values on form submition (or are willing to work a little harder in getting the separate values), you could put all of the checkboxes into a collection by giving them all the same name. Then you can use document.getElementsByName('checkboxesName') which returns a collection of elements with the same name (different from getElementById in that id only returns one element)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum