asked on

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

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>

Open in new window

lambdabunker

give your controls an id within the javascript code

eg:

<table id="piTable">
<tr>
<td id='td1'>Content within the td</td>

then you can do on the server side.

CType(Page.FindControl("td1"), HtmlTableCell).InnerText to access the content within the table cell.

or if you want to access an input type control then do

CType(Page.FindControl("inputelementid"), HtmlInputText).Value

another alternative approach is to attach a runat=server property to the input element and your control will then be accessible from the server side.

i hope this helps out.

engg

ASKER

Thank you. When rows are dynamically added/removed through javascript, the code-behind page is not seeing the new no. of rows.

I would like to have a javascript function (would appreciate the javascript code for this) read this table and pass the values to the server if that's more efficient than attaching a runat=server property to all html controls. Please correct me if it's not more efficient.

ASKER CERTIFIED SOLUTION

lambdabunker

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

engg

ASKER

Thank you. I am not calling the server side function from Javascript.
I would call the Javascript function (that reads textbox values from this HTML table and store them in a hidden variable) from the code-behind. I would appreciate the code for this javascript function. I tried it at work, but something was wrong. I can't access my code from home now.

lambdabunker

OK.

say for example your hidden field is:
<asp:HiddenField ID="field1" runat="server" />

within javascript use:
document.getElementById("field1").value = xyz;

where xyz is whatever value you want to store, then you can access the value of the hidden field from the server side.
i hope this helps.

scrathcyboy

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?"

You are using the WRONG methodology to do this. What you want is exactly what a FORM was designed to do -- send the data to an ASP or PHP via variables.

So you set up a form with as many hidden variables as you want, and you POST it to the ASP page via --

FORM name="form1" id="form1" action="your_asp.asp" method "POST"

and so on, and you put all the hidden variables in that form. Then the ASP page gets them with the $_Request(field_name) and you just go from there ....

engg

ASKER

Thanks lambdabunker. I will do this first thing tomorrow morning, somehow my javascript function to read values from the html table didn't work today.

Thanks scrathcyboy. I will be using a hidden variable to pass the data in HTML table to the server. In my question, I wasn't sure if that was the only way to do that.

I am using asp.net (.aspx pages, code behind model) Can't I just add runat=server property to each input type='text' element whose value I need access to on the server instead of using hidden variables?

gops1

Try to execute this example. May be this would give you some idea on how to read values:

<html>
	<head>
		<title>Script Demo Gops</title>
		<style>
			  body, table,input, select,span, a{font-family:verdana;font-size:x-small;text-decoration:none}
		</style>
		<script language="javascript">
			function addRow(theLink){
				  theRow = theLink.parentNode.parentNode;
				  theBod=theRow.parentNode;
				  //giving unique id and name to text box
				  var rowId=theBod.rows[theBod.rows.length-1].cells[1].firstChild.id;
				  rowId=rowId.substring(0,3)+(parseInt(rowId.substring(3,rowId.length))+1);
				  theTable=theRow.parentNode;
				  newRow = theRow.cloneNode(true);
				  theBod.appendChild(newRow);
				  newRow.cells[0].firstChild.id=rowId;
				  newRow.cells[0].firstChild.name=rowId;
				  return false;
			}
 
			function removeRow(theLink){
				  theRow = theLink.parentNode.parentNode;
				  theBod=theRow.parentNode;
				  theBod.removeChild(theRow);
			}
 
			function validate(f){
				  var ctr=0;
				  var msg="These are the text box(es) that are filed\n";
				  for(var i=0;i<f.elements.length;i++){
						if(f.elements[i].type.toLowerCase()=="text"){
							  if(f.elements[i].value!=""){
									msg+=f.elements[i].name+"     "+f.elements[i].value+"\n";
									ctr++;
							  }else{
									alert("You left this text box blank: \n" + f.elements[i].name);
									f.elements[i].focus();
									return false;
							  }
						}
				  }
				  if(ctr>0) alert(msg);
			}
		</script>
</head>
<body>
 
	<form name="test" onsubmit="return validate(this);">
		<table border="0" cellspacing="2" cellpadding="2">
			<tr>
				<td>Pixel URL:</td>
				<td><input type="text" size="80" id="txt1" name="txt1"></td>
				<td><a href="#" onClick="addRow(this);return false;">+</a></td>
				<td><a href="#" onClick="removeRow(this);return false;">-</a></td>
			</tr>
		</table>
		<input type="submit" value="Submit">
	</form>
</body>
</html>

Open in new window

kurijov

Prototype required

function processTable(tableId)
{
	var textBoxes = $(tableId).$$('input[type="text"]');
	var mForm = Element.extend(document.createElement('form'));
	mForm.action = 'your_url_here';
	mForm.method = 'post';
	
	for (var i = 0; textBoxes.length; i++)
	{
		var input = Element.extend(document.createElement('input'));
		input.name = textBoxes[i].id;
		input.type = 'hidden';
		input.value = textBoxes[i].value;
		mForm.appendChild(input);
	}
	
	document.appendChild(mForm);
	mForm.submit();
}

Open in new window

engg

ASKER

Thanks.
I am trying to update the hiddenfield value through Javascript and then read it from code-behind. It doesn't work.

//In .aspx page,
function getValues()
{
     document.getElementById('<%=HiddenField1.ClientID%>').value = 'abcdef';
}
................
...............
<asp:HiddenField ID="HiddenField1" runat="server" />
 
//in code-behind, this code is on a asp:button click event and this button is in ajax updatePanel
ScriptManager.RegisterStartupScript(this, this.GetType(), "CloseWindow", "getValues()", true);
string temp = HiddenField1.Value;
//temp is NOT equal to 'abcdef' here

Open in new window

engg

ASKER

I need to read the html table in and then store its values in a hidden field using Javascript, then read this hidden field on the server using C#.
I need to get the above code (in the earlier post) working. please help.

engg

ASKER

Solved this problem. Called the Javascript function getValues() on a asp:button click, instead of using RegisterStartupScript.

engg

ASKER

Thank you all. I used this function to get values from the HTML table and stored it in a hidden server variable and then accessed its value on the server. I accepted lambdabunker's comment as solution as it confirmed that hidden variable was the way to do this, but still some of my questions were unanswered.

function getAllPUValues()
    {
        var tbl = document.getElementById('piTable');
        var tbl_Cell_txt = '';
        for(var i = 0; i < tbl.rows.length; ++i)
        {
            var tbl_row = tbl.rows[i];
            var tbl_Cell = tbl_row.cells[1];
            tbl_Cell_txt = tbl_Cell_txt + tbl_Cell.childNodes[0].value + '#';
        }
        document.getElementById('<%=Hidden1.ClientID%>').value = tbl_Cell_txt;
    }

Open in new window

sohail khowaja

with web service you can easily get values