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 3 of 3
  1. #1
    Regular Coder MaDmiX's Avatar
    Join Date
    Feb 2012
    Location
    Charlotte, NC
    Posts
    201
    Thanks
    51
    Thanked 0 Times in 0 Posts

    Need help with a dynamic table

    Hi All,

    I am working on a script to generate a dynamic table and populate the fields in that table with data from a number of text fields on my page.

    The page uses Adobe spry validation and this is the only way I can get my validation to function and add the data to the table dynamically (I had a script where the text fields were part of the first row and blank rows were added dynamically but the validation would not work for the added rows... This is a workaround).

    Being new to JS I did the best I could and I think it's clear what I am going for but I am sure my syntax and method usage is off. When I click to add the table row, I get "[object HTMLLabelElement]" in each cell (dunno what that is). Could someone please help me get going in the right direction with this code? Here it is and thanks in advance for any help.


    Code:
    A<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <script src="SpryAssets/SpryValidationTextField.js" type="text/javascript"></script>
    
    </style>
    <link href="SpryAssets/SpryValidationTextField.css" rel="stylesheet" type="text/css" />
    
    </head>
            <SCRIPT language="javascript">         
            function addRow(tableID) {
                //These variable are commented out and coded inline below.
                //var StartTime = document.getElementById(StartTime);
                //var EndTime = document.getElementById(EndTime);
                //var MaterialID = document.getElementById(MaterialID);
                //var Title = document.getElementById(Title);               
                
                var table = document.getElementById(tableID);               
                
                var rowCount = table.rows.length;             
                var row = table.insertRow(rowCount);               
                
                var cell1 = row.insertCell(0);             
                var element1 = document.createElement("input");
                element1.type = "checkbox";             
                cell1.appendChild(element1);               
                
                var cell2 = row.insertCell(1);             
                var element2 = document.createElement("input");             
                element2.type = "text";
                element2.setAttribute("id","StartTime[]");
                //Set the value to the form's textfield.
                element2.value = document.getElementById(StartTime);             
                cell2.appendChild(element2);              
                
                var cell3 = row.insertCell(2);             
                var element3 = document.createElement("input");             
                element3.type = "text";
                element3.setAttribute("id","EndTime[]");
                //Set the value to the form's textfield.
                element3.value = document.getElementById(EndTime);             
                cell3.appendChild(element3); 
    
                var cell4 = row.insertCell(3);             
                var element4 = document.createElement("input");             
                element4.type = "text";
                element4.setAttribute("id","MaterialID[]");
                //Set the value to the form's textfield.
                element4.value = document.getElementById(MaterialID);             
                cell4.appendChild(element4);               
                
                var cell5 = row.insertCell(4);             
                var element5 = document.createElement("input");             
                element5.type = "text";
                element5.setAttribute("id","Title[]");
                //Set the value to the form's textfield.
                element5.value = document.getElementById(Title);             
                cell5.appendChild(element5);             
            }           
            function deleteRow(tableID) {             
                try {             
                    var table = document.getElementById(tableID);             
                    var rowCount = table.rows.length;               
                    for(var i=0; i<rowCount; i++) {                 
                        var row = table.rows[i];                 
                        var chkbox = row.cells[0].childNodes[0];                 
                        if(null != chkbox && true == chkbox.checked) {                     
                            table.deleteRow(i);                     
                            rowCount--;                     
                            i--;                 
                        }               
                    }             
                }catch(e) {                 
                    alert(e);             
                }         
            }       
        </SCRIPT> 
    <body>
    <span id="spryStartTime">
    <label for id="StartTime">Start Time:</label><br />
    <input name="StartTime" type="text" id="StartTime" tabindex="1" size="10" maxlength="8" />
    <span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldInvalidFormatMsg">Invalid format.</span></span><br />
    <label for id="EndTime">End Time:</label><br />
    <span id="spryEndTime">
    <input name="EndTime" type="text" id="EndTime" tabindex="2" size="10" maxlength="8" />
    <span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldInvalidFormatMsg">Invalid format.</span></span><br />
    <label for id="MaterialID">Material ID:</label><br />
    <span id="spryMaterialID">
    <input name="MaterialID" type="text" id="MaterialID" tabindex="3" size="10" maxlength="10" />
    <span class="textfieldRequiredMsg">A value is required.</span></span><br />
    <label for id="Title">Title:</label><br />
    <span id="spryTitle">
    <input name="Title" type="text" id="Title" tabindex="4" size="50" maxlength="50" />
    <span class="textfieldRequiredMsg">A value is required.</span></span><br />
        <INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />       
        <INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />       
    <!--
    I would prefer not to start with a table with blank rows
    (but rather create the rows already populated)
    but I can work on this later.
    -->    
        <TABLE id="dataTable" width="350px" border="1">
            <TR>             
                <TD><INPUT type="checkbox" name="chk"/></TD>             
                <TD><INPUT type="text" /></TD>             
                <TD><INPUT type="text" /></TD> 
                <TD><INPUT type="text" /></TD> 
                <TD><INPUT type="text" /></TD>          
            </TR>     
        </TABLE>
    <script type="text/javascript" />
    var sprytextfield3 = new Spry.Widget.ValidationTextField("spryStartTime", "time", {validateOn:["blur"], format:"HH:mm:ss", useCharacterMasking:true});
    var sprytextfield4 = new Spry.Widget.ValidationTextField("spryEndTime", "time", {format:"HH:mm:ss", useCharacterMasking:true, validateOn:["blur"]});
    var sprytextfield5 = new Spry.Widget.ValidationTextField("spryMaterialID", "none", {validateOn:["blur"]});
    var sprytextfield6 = new Spry.Widget.ValidationTextField("spryTitle", "none", {validateOn:["blur"]});
    </script>
    
    </body>
    </html>
    Last edited by MaDmiX; 03-07-2012 at 09:59 PM. Reason: Added info to post.

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    Your markup is severely flawed

    1. Each id attribute can only be used on one single element on the page
    2. An id attribute must not have [] array markers
    3. For a <label> element you have a "for" attribute that takes the id value of another (input) element on the page like
    Code:
    <label for="StartTime">....</label>
    
    // this is wrong!
    <label for id="StartTime">...</label>
    4. In your Javascript code you commented out some lines like
    Code:
    //These variable are commented out and coded inline below.
    //var StartTime = document.getElementById(StartTime);
    but later on you use the variable without defining or setting it anywhere
    Code:
    element2.value = document.getElementById(StartTime);
    5. It's not recommended to use the same names for JS variables as for HTML name or id attributes

    I didn't look further because for now those are enough problems to solve :-)
    Last edited by devnull69; 03-08-2012 at 11:09 AM.

  • #3
    Regular Coder MaDmiX's Avatar
    Join Date
    Feb 2012
    Location
    Charlotte, NC
    Posts
    201
    Thanks
    51
    Thanked 0 Times in 0 Posts
    Hi devnull69,

    Thanks for all your advice. Here is the working code:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <script src="SpryAssets/SpryValidationTextField.js" type="text/javascript"></script>
    
    </style>
    <link href="SpryAssets/SpryValidationTextField.css" rel="stylesheet" type="text/css" />
    
    </head>
            <SCRIPT language="javascript">         
            function addRow(tableID) {
                //These variable are commented out and coded inline below.
                //var StartTime = document.getElementById(StarTime);
                //var EndTime = document.getElementById(EndTime);
                //var MaterialID = document.getElementById(MaterialID);
                //var Title = document.getElementById(Title);               
                
                var table = document.getElementById(tableID);               
                
                var rowCount = table.rows.length;             
                var row = table.insertRow(rowCount);               
                
                var cell1 = row.insertCell(0);             
                var element1 = document.createElement("input");
                element1.type = "checkbox";             
                cell1.appendChild(element1);               
                
                var cell2 = row.insertCell(1);             
                var element2 = document.createElement("input");             
                element2.type = "text";
                element2.setAttribute("name","StartTime[]");
                //Set the value to the form's textfield.
                element2.value = document.getElementById('StartTime').value;             
                cell2.appendChild(element2);              
                
                var cell3 = row.insertCell(2);             
                var element3 = document.createElement("input");             
                element3.type = "text";
                element3.setAttribute("name","EndTime[]");
                //Set the value to the form's textfield.
                element3.value = document.getElementById('EndTime').value;             
                cell3.appendChild(element3); 
    
                var cell4 = row.insertCell(3);             
                var element4 = document.createElement("input");             
                element4.type = "text";
                element4.setAttribute("name","MaterialID[]");
                //Set the value to the form's textfield.
                element4.value = document.getElementById('MaterialID').value;            
                cell4.appendChild(element4);               
                
                var cell5 = row.insertCell(4);             
                var element5 = document.createElement("input");             
                element5.type = "text";
                element5.setAttribute("name","Title[]");
                //Set the value to the form's textfield.
                element5.value = document.getElementById('Title').value;             
                cell5.appendChild(element5);             
            }           
            function deleteRow(tableID) {             
                try {             
                    var table = document.getElementById(tableID);             
                    var rowCount = table.rows.length;               
                    for(var i=0; i<rowCount; i++) {                 
                        var row = table.rows[i];                 
                        var chkbox = row.cells[0].childNodes[0];                 
                        if(null != chkbox && true == chkbox.checked) {                     
                            table.deleteRow(i);                     
                            rowCount--;                     
                            i--;                 
                        }               
                    }             
                }catch(e) {                 
                    alert(e);             
                }         
            }       
        </SCRIPT> 
    <body>
    <span id="spryStartTime">
    <label for="StartTime">Start Time:</label><br />
    <input name="StartTime" type="text" id="StartTime" tabindex="1" size="10" maxlength="8" />
    <span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldInvalidFormatMsg">Invalid format.</span></span><br />
    <label for="EndTime">End Time:</label><br />
    <span id="spryEndTime">
    <input name="EndTime" type="text" id="EndTime" tabindex="2" size="10" maxlength="8" />
    <span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldInvalidFormatMsg">Invalid format.</span></span><br />
    <label for="MaterialID">Material ID:</label><br />
    <span id="spryMaterialID">
    <input name="MaterialID" type="text" id="MaterialID" tabindex="3" size="10" maxlength="10" />
    <span class="textfieldRequiredMsg">A value is required.</span></span><br />
    <label for="Title">Title:</label><br />
    <span id="spryTitle">
    <input name="Title" type="text" id="Title" tabindex="4" size="50" maxlength="50" />
    <span class="textfieldRequiredMsg">A value is required.</span></span><br />
        <INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />       
        <INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />       
    <!--
    I would prefer not to start with a table with blank rows
    (but rather create the rows already populated)
    but I can work on this later.
    -->    
        <TABLE id="dataTable" width="350px" border="1">
            <TR>             
                <TD><INPUT type="checkbox" name="chk"/></TD>             
                <TD><INPUT type="text" /></TD>             
                <TD><INPUT type="text" /></TD> 
                <TD><INPUT type="text" /></TD> 
                <TD><INPUT type="text" /></TD>          
            </TR>     
        </TABLE>
    <script type="text/javascript" />
    var sprytextfield3 = new Spry.Widget.ValidationTextField("spryStartTime", "time", {validateOn:["blur"], format:"HH:mm:ss", useCharacterMasking:true});
    var sprytextfield4 = new Spry.Widget.ValidationTextField("spryEndTime", "time", {format:"HH:mm:ss", useCharacterMasking:true, validateOn:["blur"]});
    var sprytextfield5 = new Spry.Widget.ValidationTextField("spryMaterialID", "none", {validateOn:["blur"]});
    var sprytextfield6 = new Spry.Widget.ValidationTextField("spryTitle", "none", {validateOn:["blur"]});
    </script>
    
    </body>
    </html>
    Kind regards,

    Ken


  •  

    Posting Permissions

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