troubleshooting Question

how to read HTML table in Javascript and pass values to the server

Avatar of engg
engg asked on
JavaScriptHTMLASP.NET
14 Comments1 Solution13390 ViewsLast Modified:
Hi,
I have a HTML table (code attached) in the user control (.ascx) page. The user can dynamically add rows to/deletes rows from this table, using Javascript.

There's an asp:button server control on the .aspx page containing this user control. This button, when clicked should send data in all textboxes in the HTML table to the server.

I am new to javascript and VS 2008 (ASP.NET 3.5) doesn't let me debug .ascx javascript, I am looking for a Javascript function to read textbox data from this HTML table.

and once I get this data, how do I send it to the server (to the code behind .aspx.cs page)? (if I have to, how do i use a hidden variable for this?

I used HTML table and javascript functions to add/remove rows as opposed to a asp:table web control, because I thought doing this on the client side is more efficient than doing on the server side with postbacks. Please correct me if I am wrong.

Thanks.
<script type="text/javascript">
    function removeRow(src)
    {
        var oRow = src.parentNode.parentNode;
        document.getElementById("piTable").deleteRow(oRow.rowIndex); 
    }
    
    function addRow()
    {
        var newRow = document.getElementById("piTable").insertRow(-1);
 
        var oCell = newRow.insertCell(0);
        oCell.innerHTML = "Pixel URL:";
 
        oCell = newRow.insertCell(1);
        oCell.innerHTML = "<input type='text' name='urltxt' size='80'>";
 
        oCell = newRow.insertCell(2);
        oCell.innerHTML = "<input type='button' value='Remove' onclick='removeRow(this);'/>";
    }
</script>
 
<table id="piTable">
    <tr>
        <td>Pixel URL:</td>
        <td><input id="Text1" type="text" size="80" /></td>
        <td><input id="Button1" type="button" value="Remove" onclick='removeRow(this);'/></td>
    </tr>
    <tr>
        <td>Pixel URL:</td>
        <td><input id="Text2" type="text" size="80" /></td>
        <td><input id="Button2" type="button" value="Remove" onclick='removeRow(this);' /></td>
    </tr>
    <tr>
        <td>Pixel URL:</td>
        <td><input id="Text3" type="text" size="80" /></td>
        <td><input id="Button3" type="button" value="Remove" onclick='removeRow(this);' /></td>
    </tr>
</table>
Join the community to see this answer!
Join our exclusive community to see this answer & millions of others.
Unlock 1 Answer and 14 Comments.
Join the Community
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 14 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros