Member Avatar for humipine

I am working on a project with asp.net and vb.net language system.
Now I made a table on the asp file, and before clicking on a button "update", by JavaScript, I would like to get all the string data written in the text boxes each placed inside a cell of the table.

Now, I wrote the following codes;

function getData(){
        var tblData = new Array();          
        var table = document.getElementById("<%=tblA.ClientID%>");
        var i;
        var txt;
        var txt2;

        tr = table.getElementsByTagName('tr');
        for (i = 0; i < tr.length; i++) {
            var ttl = "txt : ";
            var ttl2 = "txt2 : ";

            td = tr[i].getElementsByTagName('td');
            txt = td[4].childNodes[0].nodeValue; //This is wrong...
            txt2 = td[10].childNodes[0].nodeValue; //This is wrong...
            alert(ttl + txt + ttl2 + txt2);

            tblData[i, 1] = txt;
            tblData[i, 2] = txt2;
            }
        }
       // Here, I would like to send the array object containing the data of the textboxes. How can I do it?
        return true;
}

Now, please let me know what to wrote to get the texts from the textboxes, and how to send the array data to the server for update_click function to get it.

Edited by mike_2000_17 because: Fixed formatting
  • 3 Contributors
  • 2 Replies
  • 239 Views
  • 21 Hours Discussion Span
  • Latest Post Latest Post by essential

Dani AI

Generated

’s main issue is that td[4].childNodes[0].nodeValue reads DOM text nodes (or whitespace), not the value of an input element. Inputs expose their text via the .value property. Using the server control ClientID like document.getElementById("<%=tblA.ClientID%>") is fine; selecting child nodes directly is fragile and breaks when markup/whitespace changes. ’s point about showing the plain HTML is useful. ’s demo shows one approach (splitting on spaces) but that loses spaces inside fields — JSON is safer for arbitrary text.

A compact, robust way to collect all inputs per row:

function collectTableInputs(tableClientId) {
  var table = document.getElementById(tableClientId);
  if (!table) return [];
  var rows = table.rows;
  var data = [];
  for (var r = 0; r < rows.length; r++) {
    var inputs = rows[r].querySelectorAll('input[type="text"], textarea, select');
    if (!inputs.length) continue;
    var rowVals = [];
    for (var i = 0; i < inputs.length; i++) rowVals.push(inputs[i].value.trim());
    data.push(rowVals);
  }
  return data;
}
// call with: var data = collectTableInputs('<%=tblA.ClientID%>');

Two simple ways to get that array to server-side update_click logic:

  • Postback via a hidden field: put JSON.stringify(data) into a hidden <input runat="server"> and submit the form (or trigger the server button click). The server can Request.Form("hiddenFieldName") or read the runat control and deserialize.
  • AJAX to a WebMethod: send JSON and handle it with a Shared WebMethod on the page.

Example client POST (fetch) plus a small VB.NET WebMethod:

fetch('ThisPage.aspx/UpdateData', {
  method: 'POST',
  headers: {'Content-Type': 'application/json'},
  body: JSON.stringify({ json: JSON.stringify(data) })
}).then(r => r.json()).then(resp => { /* handle */ });
<System.Web.Services.WebMethod()>
Public Shared Function UpdateData(json As String) As String
  Dim js As New System.Web.Script.Serialization.JavaScriptSerializer()
  Dim rows = js.Deserialize(Of List(Of List(Of String)))(json)
  ' process rows...
  Return "OK"
End Function

Practical notes: add a stable class or data- attribute to inputs (avoid relying on ASP.NET generated IDs), skip header/footer rows, validate/trim server-side, and use an XHR fallback if supporting old browsers. JSON preserves spaces and special characters; splitting on whitespace (as in ’s demo) risks mangling real input.

Recommended Answers

All 2 Replies

Member Avatar for samarudge

Shouldn't this be in the ASP forum? If you want help with JS just post some of the pure HTML, not ASP/VB

Member Avatar for essential

Im not sure if this is exactly what you need.
But this will help you to get your things done.

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/css" href="#internal"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html id="xhtml10" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head profile="http://www.w3.org/2005/10/profile">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="Content-Language" content="en" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>JavaScript Demo</title>
<style id="internal" type="text/css" charset="ISO-8859-1">
/* <![CDATA[ */
body { min-height: 600px; }
form {
   background: #ddd;
   border: 2px solid #ccc;
   margin: 40% auto 0 auto;
   padding: .7em;
   vertical-align: middle;
   width: 80%; }

td[id] { 
   padding: .5em 1.5em .3em .5em;
   line-height: 120%;
   width: auto;
   text-align: left;
   vertical-align: top; }

th {
   padding-right: 1em;
   padding-top: .5em;
   text-align: left;
   vertical-align: top; }

input[type="submit"] { 
   margin-top: .5em; }

/* ]]> */ 
</style>
<script type="text/javascript">
/* <![CDATA[ */
var count = 1;
function updateCell(form) {
var arrays = [];
var inputTxt = [];
var cell = document.getElementById('data').getElementsByTagName('td');
document.getElementById('field1').innerHTML = '';
if ( form ) {
   with( form ) {
   inputTxt[0] = txt0.value;
   inputTxt[1] = txt1.value;
for ( var i = 0; i < inputTxt.length; i++ ) {
   arrays[i] = inputTxt[i]; 
} for ( var x = 0, m = arrays[0].split(' '); x < m.length; x++ ) {

/* Converting input values into an array, separating each value with white spaces */

m.sort();
cell['field0'].innerHTML += '<strong>' + (count++) + '.</strong> ' + m[x] + '<br />';
      } for ( var y = 0, n = arrays[1].split(' '); y < n.length; y++) {
n.sort();

/* Another way to store text--
   Skipping the work by listing all the input value using the list element. */
   document.getElementById('field1').innerHTML += '<li>' + n[y] + '</li>'; 
      }       
    }
  } return false;
}
/* ]]> */
</script>
</head>
<body>
<form action="#" onsubmit="return updateCell(this);">
<table id="data" summary="A JavaScript Demo">
<tr>
<th><label for="txt0">Field 1</label></th>
<td colspan="3"><input type="text" size="40" id="txt0" name="txt0" value="" />
</td>
</tr>
<tr>
<th><label for="txt1">Field 2</label></th>
<td colspan="3"><input type="text" size="40" id="txt1" name="txt1" value="" />
</td>
</tr>
<tr>
<th style="vertical-align: text-top; padding-top: .5em;" rowspan="2">Output:</th>
<th>Text 1:</th>
<td id="field0"></td>
<td style="text-align: right;"><input type="submit" id="btn" name="btn" value="update" /></td>
</tr>
<tr>
<th>Text 2:</th>
<td colspan="1" id="demo"><ol id="field1" style="margin: 0 0 0 1.2em;"><li>Update</li></ol></td>
</tr>
</table>
</form>
</body>
</html>

This demo will convert all text value into an array separated by white spaces.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.