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..

[nurul_sirene]

i use your code above.. it works excellent. but how can i set the row color and align the textfield ?

thank you

[Alexei Kubarev]

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

for instance.. quite an easy thing to use

[nurul_sirene]

hi..tq for your reply.. it is as simple as that.. :p i'm not very familiar with javascript

another question:

how to get total rows, as I don't know how many fields would be requested

thank you

[Alexei 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]

[nurul_sirene]

hey .. i also thought the same way

thank you for your kind reply

[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>