Dynamic table with dropdown and textboxes

[daitasri]

Hi
I am using HTML and JS only.
When i click on Button(say Add) a new row will be added in to the table with dropdown's and textboxes.I want to know how to access the data entered in the textboxes and dropdowns
Please help me out as i am a beginner

[gits]

hi ...

please post the code you already have. basicly you may retrieve the values with:

[CODE=javascript]// noderef is a reference to your node
var val = noderef.value;[/CODE]
kind regards

[daitasri]

hi ...

please post the code you already have. basicly you may retrieve the values with:

[CODE=javascript]// noderef is a reference to your node
var val = noderef.value;[/CODE]
kind regards

Hi ,
This is the code i m using

[CODE=javascript]function addRowToTable()
{
var tbl = document.getEle mentById('t1hea d');
var lastRow = tbl.rows.length ;
// if there's no header row in the table, then iteration = lastRow + 1
var iteration = lastRow;
var row = tbl.insertRow(l astRow);

// left cell
var cell1 = row.insertCell( 0);
var textNode = document.create Element('input' );
textNode.setAtt ribute('type',' text','name','t ext'+iteration, 'id','txt'+iter ation);
cell1.appendChi ld(textNode);

// right cell
var cell2 = row.insertCell( 1);
var el = document.create Element('input' );
el.type = 'text';
el.name = 'text' + (iteration+1);
el.id = 'txt' + (iteration+1);
cell2.appendChi ld(el);

// select cell
var cell3 = row.insertCell( 2);
var sel3 = document.create Element('select ');
sel3.name = 'request_access ';
sel3.id='RA'+it eration;
sel3.options[0] = new Option('Y', '0');
sel3.options[1] = new Option('N', '1');
cell3.appendChi ld(sel3);
}
[/CODE]
How can i save the values typed in textbox and dropdowns.
Thanks & Rgeards
daitasri

[gits]

when do you want to save them? on a specific action like a button-click or submit? you just posted the code to append a line but that only creates the nodes ... later on the user types in something and then you may save the data. do you need to save it in a database? explain the requirement a bit more detailed please.

kind regards

[daitasri]

when do you want to save them? on a specific action like a button-click or submit? you just posted the code to append a line but that only creates the nodes ... later on the user types in something and then you may save the data. do you need to save it in a database? explain the requirement a bit more detailed please.

kind regards

Hi
The user types something in those textboxes and then clicks on "save" button then i need to save them into variables and also in database.I am using SQL Server as database.

Regards

[gits]

you have some possibilities for that purpose:

1. submit the form and create a serverside save logic ... that would result in a page-reload ... which is the 'classical' way ...

2. use an XMLHttpRequest (AJAX-call) to send the request in the background and let the serverside code save the data to the database ... 'the modern up-to-date-way' ... that involves some clientside code in addition to the serverside one

kind regards

[daitasri]

Can u please send some examples of how to access the textboxes and data entered in textbox? I m not using AJAX. I need to do in javascript only. Please help me on this.

[daitasri]

I tried using textboxname.val ue also but it shows error. I named the textboxes as "text"+i where 'i' is getting incremented in a loop. I want to access the data entered in that textbox, using a javascript function and i want to store those values in some variables but not able to do.Request you to help on this.

Thanks

[gits]

hi ...

assuming you have the following row:

[HTML]<table>
<tr>
<td><input type="text" value="test"/></td>
<td><input type="text" value="test1"/></td>
<td><input type="text" value="test2"/></td>
</tr>
</table>
[/HTML]
you may use something like the following simple function to retrieve the values of all the textboxes of that row:

[CODE=javascript]function get_row_values( row) {
var record = {};
var fields = row.getElements ByTagName('inpu t');

for (var i = 0, node; node = fields[i]; i++) {
record['field' + i] = node.value;
}

return record;
}

var row = document.getEle mentsByTagName( 'tr')[0];
var rec = get_row_values( row);

alert(rec.field 0 + ' - ' + rec.field1 + ' - ' + rec.field2);
[/CODE]
that retrieves the values of all inputnodes found in a <tr>-element and stores it in an javascript object called 'record' ...

kind regards

[daitasri]

Hi
Thanks for your help.I tried that but it shows as 'undefined'. I m sending u the whole code which i am using.Please tell me wat is wrong in that or how can i modify to achieve my requirement.

[HTML]<html>
<head>
<script language="javas cript">
function createTable(id, ctr)
{
var tbody = document.getEle mentById(id).ge tElementsByTagN ame("TBODY")[0];
var i;
for(i=1;i<=ctr; i++)
{
var row1=document.c reateElement('T R');

var row1td1=documen t.createElement ('TD');
var row1td1_n=docum ent.createEleme nt('INPUT');
row1td1.appendC hild(row1td1_n) ;
row1td1_n.setAt tribute('TYPE', 'text');
// row1td1_n.setAt tribute('ID','u id'+i);
row1td1_n.setAt tribute('NAME', 'UID'+i);
row1td1_n.setAt tribute('ID','U ID'+i);



var row1td2=documen t.createElement ('TD');
var row1td2_n=docum ent.createEleme nt('INPUT');
row1td2.appendC hild(row1td2_n) ;
row1td2_n.setAt tribute('TYPE', 'text');
row1td2_n.setAt tribute('NAME', 'CID'+i);
row1td2_n.setAt tribute('ID','C ID'+i);


//row1td2.appendC hild(document.c reateElement('I NPUT' ));
//row1td2.setAttr ibute('TYPE','t ext','NAME','CN '+i);



var row1td3=documen t.createElement ('TD');
var row1td3sel=docu ment.createElem ent('select' );
row1td3sel.setA ttribute('id',' RA'+i,'NAME','r equest_access') ;
row1td3.appendC hild(row1td3sel );

var subrow3_y=docum ent.createEleme nt('option');
subrow3_y.inner HTML='Y';
subrow3_y.value =1;

var subrow3_n=docum ent.createEleme nt('option');
subrow3_n.inner HTML='N';
subrow3_n.value =2;
row1td3sel.appe ndChild(subrow3 _y);
row1td3sel.appe ndChild(subrow3 _n);


var row1td4=documen t.createElement ('TD');
var row1td4sel=docu ment.createElem ent('select' );
row1td4sel.setA ttribute('id',' PA'+i,'NAME','p reference_acces s');
row1td4.appendC hild(row1td4sel );

var subrow4_y=docum ent.createEleme nt('option');
subrow4_y.inner HTML='Y';
subrow4_y.value =1;

var subrow4_n=docum ent.createEleme nt('option');
subrow4_n.inner HTML='N';
subrow4_n.value =2;

row1td4sel.appe ndChild(subrow4 _y);
row1td4sel.appe ndChild(subrow4 _n);


var row1td5=documen t.createElement ('TD');
var row1td5sel=docu ment.createElem ent('select' );
row1td5sel.setA ttribute('id',' AA'+i,'NAME','a ctivity_access' );
row1td5.appendC hild(row1td5sel );

var subrow5_y=docum ent.createEleme nt('option');
subrow5_y.inner HTML='Y';
subrow5_y.value =1;

var subrow5_n=docum ent.createEleme nt('option');
subrow5_n.inner HTML='N';
subrow5_n.value =2;

row1td5sel.appe ndChild(subrow5 _y);
row1td5sel.appe ndChild(subrow5 _n);

var row1td6=documen t.createElement ('TD');
var row1td6sel=docu ment.createElem ent('select' );
row1td6sel.setA ttribute('id',' UR'+i,'NAME','u ser_rights');
row1td6.appendC hild(row1td6sel );

var subrow6_y=docum ent.createEleme nt('option');
subrow6_y.inner HTML='Y';
subrow6_y.value =1;

var subrow6_n=docum ent.createEleme nt('option');
subrow6_n.inner HTML='N';
subrow6_n.value =2;

row1td6sel.appe ndChild(subrow6 _y);
row1td6sel.appe ndChild(subrow6 _n);

var row1td7=documen t.createElement ('TD');
var row1td7btn=docu ment.createElem ent('input');
row1td7btn.setA ttribute('type' ,'button','name ','Del'+i);
row1td7btn.valu e='Delete';
row1td7btn.id=' Del'+i;
row1td7btn.oncl ick=function remove(){ removeRowFromTa ble(row1td7btn. id);};
row1td7.appendC hild(row1td7btn );



row1.appendChil d(row1td1);
row1.appendChil d(row1td2);
row1.appendChil d(row1td3);
row1.appendChil d(row1td4);
row1.appendChil d(row1td5);
row1.appendChil d(row1td6);
row1.appendChil d(row1td7);


tbody.appendChi ld(row1);
}

}

function addRowToTable()
{
var tbl = document.getEle mentById('t1hea d');
var lastRow = tbl.rows.length ;
// if there's no header row in the table, then iteration = lastRow + 1
var iteration = lastRow;
var row = tbl.insertRow(l astRow);

// left cell
var cell1 = row.insertCell( 0);
var textNode = document.create Element('input' );
textNode.setAtt ribute('type',' text','name','t ext'+iteration, 'id','txt'+iter ation);
cell1.appendChi ld(textNode);

// right cell
var cell2 = row.insertCell( 1);
var el = document.create Element('input' );
el.type = 'text';
el.name = 'text' + (iteration+1);
el.id = 'txt' + (iteration+1);
cell2.appendChi ld(el);

// select cell
var cell3 = row.insertCell( 2);
var sel3 = document.create Element('select ');
sel3.name = 'request_access ';
sel3.id='RA'+it eration;
sel3.options[0] = new Option('Y', '0');
sel3.options[1] = new Option('N', '1');
cell3.appendChi ld(sel3);

// select cell
var cell4 = row.insertCell( 3);
var sel4 = document.create Element('select ');
sel4.name = 'preferences_ac cess';
sel4.id='PA'+it eration;
sel4.options[0] = new Option('Y', '0');
sel4.options[1] = new Option('N', '1');
cell4.appendChi ld(sel4);

// select cell

var cell5 = row.insertCell( 4);
var sel5 = document.create Element('select ');
sel5.name = 'activity_acces s';
sel5.id='AA'+it eration;
sel5.options[0] = new Option('Y', '0');
sel5.options[1] = new Option('N', '1');
cell5.appendChi ld(sel5);

// select cell

var cell6 = row.insertCell( 5);
var sel6 = document.create Element('select ');
sel6.name = 'user_rights';
sel6.id='UR'+it eration;
sel6.options[0] = new Option('Y', '0');
sel6.options[1] = new Option('N', '1');
cell6.appendChi ld(sel6);

//button cell

var cell7 = row.insertCell( 6);
var el = document.create Element('input' );
el.type = 'button';
el.name = 'Del' + (iteration);
el.id = 'Del' + (iteration);
el.value='Delet e';
el.onclick=func tion remove(){ removeRowFromTa ble(el.id);};
cell7.appendChi ld(el);

}

</script>
<body bgcolor="#fffcd 0" onLoad=createTa ble('t1head',5) >
<form id=frm1 name=form1>
<table class="layout" border="4" align="center" width="100%" id=t1head>
<tr>
<td align="center"> <b> USER ID </b></td>
<td align="center"> <b> CLIENT </b></td>
<td align="center"> <b> REQUEST_ACCESS </b></td>
<td align="center"> <b> PREFERENCES_ACC ESS</b></td>
<td align="center"> <b> ACTIVITY_ACCESS </b></td>
<td align="center"> <b> USER_RIGHTS </b></td>

</tr>

</table>
<table>
<tr><td></td></tr><tr><td></td></tr>
<tr><td></td></tr></tr><tr><td></td></tr>
</tr><tr><td></td></tr><tr><td></td></tr>
<tr><td></td></tr></tr><tr><td></td></tr>
</table>
<table class="layout" border="0" align="center" id=tabBtn>
<tr>
<td align="center" colspan="2">
<input type="button" value="ADD" name="add" onClick=addRowT oTable()>
</td>

<td align="center" colspan="2">
<input type="button" value="SAVE" name="save" onClick=save1() >
</td>

<td align="center" colspan="2">
<input type="button" value="CANCEL" name="cancel" onClick="histor y.go(0)">
</td>
</tr>
</table>
</form>
</body>
</html>[/HTML]

[gits]

put that to your script-section:

[CODE=javascript]var data = [];

function save1() {
var table = document.getEle mentById('t1hea d');
var rows = table.getElemen tsByTagName('tr ');

for (var i = 0, r; r = rows[i]; i++) {
data[i] = get_row_values( r);
}
}

function get_row_values( row) {
var record = {};
var fields = row.getElements ByTagName('inpu t');

for (var i = 0, node; node = fields[i]; i++) {
record[node.name] = node.value;
}

return record;
}
[/CODE]
please fix the error in your onload where the js-statement has to be enclosed in quotes. the above code stores all row-data in an array called data ...

kind regards

PS: you have to adapt it for the select-nodes :)

[vee10]

Hi ,

this may help ur problem

var tbl = document.getElementById('t1head');
alert(tbl.rows.length);
for(i=0;i<tbl.rows.length;i++)
{
for(j=0;j<tbl.rows[i].cells.length;j++)
alert(tbl.rows[i].cells[j].childNodes[0].value);
}

Hi
Thanks for your help.I tried that but it shows as 'undefined'. I m sending u the whole code which i am using.Please tell me wat is wrong in that or how can i modify to achieve my requirement.

[daitasri]

put that to your script-section:

[CODE=javascript]var data = [];

function save1() {
var table = document.getEle mentById('t1hea d');
var rows = table.getElemen tsByTagName('tr ');

for (var i = 0, r; r = rows[i]; i++) {
data[i] = get_row_values( r);
}
}

function get_row_values( row) {
var record = {};
var fields = row.getElements ByTagName('inpu t');

for (var i = 0, node; node = fields[i]; i++) {
record[node.name] = node.value;
}

return record;
}
[/CODE]
please fix the error in your onload where the js-statement has to be enclosed in quotes. the above code stores all row-data in an array called data ...

kind regards

PS: you have to adapt it for the select-nodes :)

Thank You very much .Its working fine. I am able to store all the values. :)

[daitasri]

Hi ,

this may help ur problem

var tbl = document.getElementById('t1head');
alert(tbl.rows.length);
for(i=0;i<tbl.rows.length;i++)
{
for(j=0;j<tbl.rows[i].cells.length;j++)
alert(tbl.rows[i].cells[j].childNodes[0].value);
}

Thanks a lot. This is able to get all the values of both textboxes and dropdowns. And now i am able to store all the values .

[Sriku]

Hi
Thanks for your help.I tried that but it shows as 'undefined'. I m sending u the whole code which i am using.Please tell me wat is wrong in that or how can i modify to achieve my requirement.

Dosth i am not able to delete any row can u help me please?

am new to this scripts.