javascript function - error on multiple forms

[Guest]

Hello,

I have the following javascript function but since there are more than one forms in my page, this function doesn't work propertly. How can I make this functin to work with one of my forms which is named "emailform"? note: this function works perfectly wheen there's only one form in my page.

function highlight_all(num)
{
   for(i = 1; i <= num; i++)
   {
      document.getElementById('tr' + i).className = 'selected';
   }
}

everytime I call the above function i'm getting getElementById is null error on my page!

Please advice.

[Guest]

try

function highlight_all(num)
{
   for(i = 1; i <= num; i++)
   {
      document.emailform.getElementById('tr' + i).className = 'selected';
   }
}

[Guest]

Thx for the reply. still not working

[mack_]

I you want to obtain the form element then you need to also give an ID

to the form, you cannot getElementById with only a name:

<form name="test" id="test">

and then

document.getElementById("test").className

to change the class on the form element.

Mack

[Guest]

Didn't work!

here is my complete javascript:

/* Highlight Row */
function highlight(id, currentClass, checkboxId)
{
   var checkbox_element = document.getElementById(checkboxId);
   var row_element = document.getElementById(id);
   row_element.className = checkbox_element.checked ? 'selected' : currentClass;
}
/* Check All */
function check_all()
{
var theemailformnum_checkboxes = document.forms["emailform"].elements.length;
   for(i = 0; i < theemailformnum_checkboxes; i++)
   {
      if(document.forms["emailform"].elements.type == 'checkbox')
      {
         document.forms["emailform"].elements.checked = true;
   
      }
   }
   highlight_all(theemailformnum_checkboxes);
}
/* Uncheck All */
function uncheck_all()
{
var theemailformnum_checkboxes = document.forms["emailform"].elements.length;
   for(i = 0; i < theemailformnum_checkboxes; i++)
   {
      if(document.forms["emailform"].elements.type == 'checkbox')
      {
         document.forms["emailform"].elements.checked = false;
      }
   }
   remove_highlight_for_all(theemailformnum_checkboxes);
}
/* Highlight All Rows (this happens when 'check_all' is triggered */
function highlight_all(theemailformnum)
{
   for(i = 1; i <= theemailformnum; i++)
   {
      document.getElementById('trid' + i).className = 'selected';
   }
}
/* Remove highlight for all Rows (this happens when 'uncheck_all' is triggered */
function remove_highlight_for_all(theemailformnum)
{
   for(i = 1; i <= theemailformnum; i++)
   {
      var initial_class = (i % 2) ? 'one' : 'two';
      document.getElementById('trid' + i).className = initial_class;
   }
}

and here is my form: (note, there are other forms in thiis page and if i delete those forms this javascript will work perfectly)

<form id="emailform" name="emailform">
 <table width="100%" border="0" cellspacing="0" cellpadding="3">
<cfloop query="GetEmails" startrow="#url.start#" endrow="#min(url.start+perpage-1, total)#">
  <tr id="trid#GetEmails.RecNum#" class="#oncheckvala#">
  
    <td width="22"><input onClick="JavaScript: highlight('trid#GetEmails.RecNum#', '#oncheckvala#', this.id);" type="checkbox" id="cb#GetEmails.RecNum#" name="id[]" value="#GetEmails.RecNum#"></td>
    <td width="150" align="left" valign="middle"><label for="cb#GetEmails.RecNum#">#FirstName# #LastName#(#GetEmails.RecNum#/#oncheckvala#/tr#GetEmails.RecNum#)</label></td>
    <td align="left" valign="middle">#EmailSubject#</td>
    <td width="150" align="left" valign="middle">#DateFormat(EmailDate, "ddd m/dd/yyyy")# #TimeFormat(EmailDate, "h:mm tt")#</td>
    <td width="50" align="left" valign="middle"><CFIF val(EmailAllSize) LT 1024>#val(EmailAllSize)# KB<CFELSE>#numberformat(val(EmailAllSize/1024))# MB</CFIF></td>
  </tr>
</table>
</cfloop>
</form>

on above code variable "oncheckvala" is change between "one" and "two" on each loop since my <TR> are dynamic and looping on each result.

also note that if I click on each check boxes they'll work fine and will perform the select, highligh and unhighlight function correctly but if I click on check all or uncheck all, that's where i'm getting the javascript error but again remember this will work if there are no other forms in this page.

here is my uncheck/check all command:

<a href="JavaScript: check_all(this.form);">Check</a> / <a href="JavaScript: uncheck_all(this.form);">Uncheck</a> All</a>

[mack_]

Didn't work!

What exactly didn't work ? (you attached more code than I'm willing to read)

Mack

[Guest]

when i put the id of the table in that javascript you told, instead of highlighting each row with the checkbox, it seems like highlighting other rows in the table but the rows with checkboxes.