Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Aug 2003
    Location
    Atlanta, Georgia
    Posts
    75
    Thanks
    0
    Thanked 0 Times in 0 Posts

    document.getElementById

    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();
    }

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    What does your html look like?

  • #3
    New Coder
    Join Date
    Aug 2003
    Location
    Atlanta, Georgia
    Posts
    75
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Html

    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>

  • #4
    New Coder
    Join Date
    Aug 2003
    Location
    Atlanta, Georgia
    Posts
    75
    Thanks
    0
    Thanked 0 Times in 0 Posts

    onclick

    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>

  • #5
    Regular Coder
    Join Date
    Sep 2005
    Posts
    535
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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...
    PHP Code:
    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=0counter<tableStuff.lengthcounter++)
      {
        
    // 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.)

  • #6
    New Coder
    Join Date
    Aug 2003
    Location
    Atlanta, Georgia
    Posts
    75
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #7
    Regular Coder
    Join Date
    Sep 2005
    Posts
    535
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #8
    New Coder
    Join Date
    Aug 2003
    Location
    Atlanta, Georgia
    Posts
    75
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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;
    }

  • #9
    Regular Coder
    Join Date
    Sep 2005
    Posts
    535
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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)
    Last edited by Pyth007; 10-21-2005 at 08:24 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •