add textfield

[whitemoss]

hi...i need some help regarding javascript..i would like to make a page where user can add more than 1 item but adding it one by one..let say there are 4 items to be inserted, then i will type the 1st item in the textfield provided and then enter ADD button.after pressing the button, the other/next textfield appear so that i can type the 2nd item n so on until 4 items inserted...after all 4 items inserted, i will submit all info in that page...

hope u all can understand what i'd said just now..

thanks in advance

[s_narkar]

<script language="JavaScript">
function addRowToTable()
{
var tbl = document.getElementById('tblSample');
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(lastRow);

var cellLeft = row.insertCell(0);
var elD = document.createElement('input');
elD.setAttribute('type', 'text');
elD.setAttribute('name', 'item_date' + iteration);
elD.setAttribute('size', '15');
cellLeft.appendChild(elD);
}

function removeRowFromTable()
{

var tbl = document.getElementById('tblSample');
var lastRow = tbl.rows.length;
var iteration = lastRow;

if (iteration > 0) {
if (lastRow > 1) tbl.deleteRow(lastRow - 1);
}
}
</script>
<table width="50%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan=2>
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="tblSample">
<tr><td>&nbsp</td></tr>
</table>
</td>
</tr>
<tr>
<td><input type="button" value="Add" onclick="addRowToTable();"></td>
<td><input type="button" value="Remove" onclick="removeRowFromTable();"></td>
</tr>
</table>


Just copy this script and check. I think you need to make some modification in the script as you want textarea. REMEMBER the table in which u want this to be display mention this id="tblSample" in table tag as shown in the above code. Also i am giving you the delete option in case you require.

Let me know the status.

Regards,

[whitemoss]

hi...

thanks so much s_narkar...i'll modify ur coding to suit with other thing in that page...i really2 appreciate it..n thank God, u understand what i've told you..

thanks again..

[Alexej Kubarev]

use:
eID.style.backgroundColor ="#FF9900";

for instance.. quite an easy thing to use

[Alexej Kubarev]

well: the smartest thing would be simply name them as row[]
so it would be an array
the use for[var c=0; c<eID.length; c++]{ DO SOMETHNG } statement. u would be able to access them by this reference eID[c]

[whitemoss]

refer to the thing that had been discussed earlier, before this, there were only 5 textfields in 1 row...so, each time i would like to add, i just add and there was no problem with that..but as requirements increased, there should be 10 textfields per row..so to put all 10 textfields in 1 row, it looked something not well-arranged because I put it in the table that the size already being set. so what i was thinking right now is by making it into 2 rows by 5 each...i dunno how to modify the code so that, each time i hit ADD button, then 2 rows with 5 empty textfields per each appeared...as well as the title for each text field so that it become user friendly...


this is the code:

Code: Select all

<script language="JavaScript"> 
function addRowToTable() 
{ 
var tbl = document.getElementById('brg'); 
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(lastRow); 

var cellLeft = row.insertCell(0); 
cellLeft.align='center';
row.bgColor = '#F7F5B9';
var elD = document.createElement('input'); 
elD.setAttribute('type', 'text'); 
elD.setAttribute('id', 'namabrg'); 
//elD.setAttribute('name', 'namabrg' + iteration); 
elD.setAttribute('name', 'namabrg[]'); 
elD.setAttribute('size', '27'); 
cellLeft.appendChild(elD); 

var cellLeft = row.insertCell(1); 
cellLeft.align='center';
row.bgColor = '#F7F5B9';
var elD = document.createElement('input'); 
elD.setAttribute('type', 'text'); 
elD.setAttribute('id', 'kuantiti'); 
//elD.setAttribute('name', 'kuantiti' + iteration); 
elD.setAttribute('name', 'kuantiti[]'); 
elD.setAttribute('size', '10'); 
cellLeft.appendChild(elD);

var cellLeft = row.insertCell(2); 
cellLeft.align='center';
row.bgColor = '#F7F5B9';
var elD = document.createElement('input'); 
elD.setAttribute('type', 'text'); 
elD.setAttribute('id', 'nilai'); 
//elD.setAttribute('name', 'nilai' + iteration); 
elD.setAttribute('name', 'nilai[]'); 
elD.setAttribute('size', '10'); 
cellLeft.appendChild(elD);

var cellLeft = row.insertCell(3); 
cellLeft.align='center';
row.bgColor = '#F7F5B9';
var elD = document.createElement('input'); 
elD.setAttribute('type', 'text'); 
elD.setAttribute('id', 'dutiImport'); 
//elD.setAttribute('name', 'dutiImport' + iteration); 
elD.setAttribute('name', 'dutiImport[]'); 
elD.setAttribute('size', '10'); 
cellLeft.appendChild(elD);

var cellLeft = row.insertCell(4); 
cellLeft.align='center';
row.bgColor = '#F7F5B9';
var elD = document.createElement('input'); 
elD.setAttribute('type', 'text'); 
elD.setAttribute('id', 'cukaiJualan'); 
elD.setAttribute('name', 'cukaiJualan' + iteration); 
elD.setAttribute('name', 'cukaiJualan[]'); 
elD.setAttribute('size', '10'); 
cellLeft.appendChild(elD);

} 

function removeRowFromTable() 
{ 

var tbl = document.getElementById('brg'); 
var lastRow = tbl.rows.length; 
var iteration = lastRow; 

if (iteration > 0) { 
if (lastRow > 1) tbl.deleteRow(lastRow - 1); 
} 
} 
</script>