Board index   FAQ   Search  
Register  Login
Board index php forum :: HTML JavaScript

add textfield

Javascript coding ..

Moderators: macek, egami, gesf

add textfield

Postby whitemoss » Tue May 24, 2005 11:47 pm

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
whitemoss
New php-forum User
New php-forum User
 
Posts: 55
Joined: Thu Apr 14, 2005 1:28 am
Location: Malaysia

Just copy this script.

Postby s_narkar » Wed May 25, 2005 12:27 am

<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,
User avatar
s_narkar
New php-forum User
New php-forum User
 
Posts: 20
Joined: Tue Nov 02, 2004 11:29 pm

Postby whitemoss » Wed May 25, 2005 1:33 am

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..
whitemoss
New php-forum User
New php-forum User
 
Posts: 55
Joined: Thu Apr 14, 2005 1:28 am
Location: Malaysia

Postby nurul_sirene » Fri May 27, 2005 5:41 am

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

thank you
nurul_sirene
New php-forum User
New php-forum User
 
Posts: 3
Joined: Fri May 27, 2005 5:35 am

Postby Alexej Kubarev » Fri May 27, 2005 9:56 am

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

for instance.. quite an easy thing to use :)
User avatar
Alexej Kubarev
Site Admin
Site Admin
 
Posts: 2223
Joined: Fri Mar 05, 2004 7:15 am
Location: Täby, Stockholms län

Postby nurul_sirene » Fri May 27, 2005 7:29 pm

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
nurul_sirene
New php-forum User
New php-forum User
 
Posts: 3
Joined: Fri May 27, 2005 5:35 am

Postby Alexej Kubarev » Sat May 28, 2005 12:37 am

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]
User avatar
Alexej Kubarev
Site Admin
Site Admin
 
Posts: 2223
Joined: Fri Mar 05, 2004 7:15 am
Location: Täby, Stockholms län

Postby nurul_sirene » Sat May 28, 2005 8:08 pm

hey .. i also thought the same way :)

thank you for your kind reply
nurul_sirene
New php-forum User
New php-forum User
 
Posts: 3
Joined: Fri May 27, 2005 5:35 am

Postby whitemoss » Mon Jul 25, 2005 2:42 am

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>

whitemoss
New php-forum User
New php-forum User
 
Posts: 55
Joined: Thu Apr 14, 2005 1:28 am
Location: Malaysia


Return to JavaScript

Who is online

Users browsing this forum: No registered users and 2 guests

Sponsored by Sitebuilder Web hosting and Traduzioni Italiano Rumeno and antispam for cPanel.

cron