6 Replies Latest reply on May 26, 2009 9:40 AM by mikeali

    javascript function - error on multiple forms

    mikeali Level 1

      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.

        • 1. Re: javascript function - error on multiple forms
          cwmcguire Level 1

          try

           

          function highlight_all(num)
          {
             for(i = 1; i <= num; i++)
             {
                document.emailform.getElementById('tr' + i).className = 'selected';
             }
          }
          • 2. Re: javascript function - error on multiple forms
            mikeali Level 1

            Thx for the reply. still not working

            • 3. Re: javascript function - error on multiple forms
              mack_ Level 3

              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

              • 4. Re: javascript function - error on multiple forms
                mikeali Level 1

                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[i].type == 'checkbox')
                      {
                         document.forms["emailform"].elements[i].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[i].type == 'checkbox')
                      {
                         document.forms["emailform"].elements[i].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>
                
                
                • 5. Re: javascript function - error on multiple forms
                  mack_ Level 3
                  Didn't work!
                  

                   

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

                   

                  Mack

                  • 6. Re: javascript function - error on multiple forms
                    mikeali Level 1

                    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.