Using JavaScript To Collect Data In ASP Table

This builds on my first post which demonstrates how to generate tables using C#.  If you haven't read my first post that is perfectly fine.  I have written my posts so each one is complete on its own.  Please click the following link if you would like to read my first post Dynamically Creating asp Tables in C#.

This example as with all of my .NET posts was written using Visual Studio Express 2012 Web.  This was developed in a webforms project but this can be used in any MVC project as well.

We first start with a table with each row containing an ASP CheckBox, Label, and HiddenField element.

Tables.aspx

<script src="../Scripts/reporting.js" type="text/javascript"></script>
    <input type="submit" name="button1" value="show table" id="button1" />
    <table id="table1">
 <tr>
  <td>
     <input id="cb_0" type="checkbox" name="cb_0" />
  </td>
  <td>
     <span id="lbl_0">0</span>
     <input type="hidden" name="hidden_0" id="hidden_0" value="0" />
  </td>
 </tr>
 <tr>
  <td>
     <input id="cb_1" type="checkbox" name="cb_1" />
  </td>
  <td>
     <span id="lbl_1">1</span>
     <input type="hidden" name="hidden_1" id="hidden_1" value="1" />
  </td>
 </tr>
 <tr>
  <td>
     <input id="cb_2" type="checkbox" name="cb_2" />
  </td>
  <td>
     <span id="lbl_2">2</span>
     <input type="hidden" name="hidden_2" id="hidden_2" value="2" />
  </td>
 </tr>
 <tr>
  <td>
     <input id="cb_3" type="checkbox" name="cb_3" />
  </td>
  <td>
     <span id="lbl_3">3</span>
     <input type="hidden" name="hidden_3" id="hidden_3" value="3" />
  </td>
 </tr>
 <tr>
  <td>
     <input id="cb_4" type="checkbox" name="cb_4" />
  </td>
  <td>
     <span id="lbl_4">4</span>
     <input type="hidden" name="hidden_4" id="hidden_4" value="4" />
  </td>
 </tr>
</table>
    <input
      type="submit"
      name="button2"
      value="get values"
      onclick="getValues(event);"
      id="button2" />
    <input type="hidden" name="hidden1" id="hidden1" />

Again, if you read my first post Dynamically Creating asp Tables in C# this would be the table created by the C# code behind. Now we want to have the users select checkbox(es) and click a button to get all the values of the rows the user checked. There are a few, actually many ways to approach this really. You could build an array and add or remove items to and from it the moment the user checks or unchecks a checkbox using the onchange event handler and checking if the checkbox was checked. I didn't like this approach. I wanted the user to make their selection, then have the selections gathered and passed to the hidden field all at once. To do this we need to use a loop to iterate through the table.

Tables.js

function addNames(event) {
    event.preventDefault();

    var hidden_names = document.getElementById('hidden1');
    var table = document.getElementById('table1');
    var inputs = table.getElementsByTagName('input');
    var inputsPerRow = 

        table.rows[0].getElementsByTagName('input').length;

    hidden_names.value = '';

    for (i = 0; i < inputs.length; i+=inputsPerRow) {
        if (inputs[i].type === 'checkbox') {
            if (inputs[i].checked) {
                if (
                       hidden_names.value == null || 
                       hidden_names.value == '') {

                    hidden_names.value = inputs[i+1].value;
                }
                else if (hidden_names.value != null) {
                    hidden_names.value += 

                        ', ' + inputs[i + 1].value;
                }
                else {
                    //nothing for now
                }
            }
        }        
    }
    alert(hidden_names.value);    
}  

This function gets all of the table input elements using table.getElemetnsByTagName('input'). This creates a list of elements that have an <input> tag. Note: When I first thought of this I tried not using <asp:HiddenField> and only used <asp:Label> in my table and thought I would be able to access the label text or value. What I learned was asp labels do not render as anything but text. I would have to use table.getElementsByTagName('span') and then iterate through those checking each element. I felt that was wasteful so I simply used the HiddenField..

In my next post I will show how to populate dynamically generated tables using input from a SQL database.