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
add textfield
Moderators: egami, macek, gesf
<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> </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,
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> </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,
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..
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
- Site Admin
- Posts: 2213
- Joined: Fri Mar 05, 2004 7:15 am
- Location: Täby, Stockholms län
- Contact:
- Alexej Kubarev
- Site Admin
- Posts: 2213
- Joined: Fri Mar 05, 2004 7:15 am
- Location: Täby, Stockholms län
- Contact:
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:
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>