|
|
|
|
|
|
| |
| <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Dynamic Page</title>
<script language="javascript">
row_no=1;
function addRow(tbl,row){
//so that user can only add 3 rows
if(row_no<=3){
var textbox='<input type="text" name="textfield[]">';//for text box
var remove= '<a href="#" onclick="removeRow(\''+ tbl +'\',\'' + row_no + '\')"/>Remove It</a>'; //for the text which is used to remove the current row by using the function removeRow(..,..)
//for suitable label to the row
if(row_no==1) text="<div class='label' align=right>First Textbox:</div>";
else if(row_no==2) text="<div class='label' align=right>Second Textbox:</div>";
else if(row_no==3) text="<div class='label' align=right>Third Textbox:</div>";
var tbl = document.getElementById(tbl);//to identify the table in which the row will get insert
var rowIndex = document.getElementById(row).value;//to identify the row after which the row will be inserted
try {
var newRow = tbl.insertRow(row_no);//creation of new row
var newCell = newRow.insertCell(0);//first cell in the row
newCell.innerHTML = text;//insertion of the 'text' variable in first cell
var newCell = newRow.insertCell(1);//second cell in the row
newCell.innerHTML = textbox + " " + remove;//insertion of the text box and the remove text using their variable
row_no++;
} catch (ex) {
alert(ex); //if exception occurs
}
}
if(row_no>3)//if the row contain 3 textbox, the add button will disapper
{
document.getElementById("add").style.display="none";
}
}
function removeRow(tbl,num)
{
var table = document.getElementById(tbl);//adentification of table
try {
row_no--;
table.deleteRow(num);//deletion of the clicked row
} catch (ex) {
alert(ex);
}
if(row_no<=3)//if row is less than 3 then the button will again appear to add row
{
document.getElementById("add").style.display="block";
}
}
</script>
</head>
<body>
<form name="form1" method="post" action="">
<table width="450" border="0" cellspacing="0" cellpadding="0" id="mytable">
<tr id="myrow">
<td colspan="2" align="center"><h3>Dynamically Handeled Table</h3>
</td>
</tr>
<tr ID="add">
<td width="177"> </td>
<td width="273" align="right"><input type="button" name="Button" value="Add Text Box" onClick="addRow('mytable','myrow')"></td>
</tr>
<tr ID="add">
<td width="177"> </td>
<td width="273" align="right"> </td>
</tr>
</table>
</form>
</body>
</html> | |
|
|
| Adding a Filter to a Text Element
Categories : Java Script, Data Validation, Form Processing | | | Form validations using javascript and including all validations in one message
Categories : HTML and PHP, Java Script, Form Processing | | | Show hide table rows to make dynamic forms
Categories : Beginner Guides, Java Script, Form Processing, HTTP | | | Form Processing : with alert Highlight field name which is not filled by user
Categories : Java Script, Form Processing, Data Validation, Beginner Guides, Web Design | | | Upload any fixed type of files, control file type through javascript and encrypt filename using php so file not get overwrite
Categories : PHP, Java Script, Functions, PHP References, Form Processing | | | Conditional Check - a script that allows a user to submit a form only if the user check a checkbox.
Categories : HTML, Java Script, Form Processing, Beginner Guides | | | PHP and javascript mouseover, mouseout, and mousedown events
Categories : PHP, Java Script, Form Processing, Beginner Guides | | | Balance values between two list boxes. Change the value of list box A acording to the value in list box B and vice versa using Javasvript.
Categories : Java Script, Form Processing | | | Changing the Style of form objects using the JavaScript OnClick method.
Categories : Java Script, Form Processing, Beginner Guides, CSS | | | JavaScript dropdown list menu to switch any page.
Categories : Java Script, Beginner Guides, Form Processing | | | showing Help (assistance) to the user while filling html forms.
Categories : HTML, Java Script, Form Processing | | | Javascript URL and Email Validation
Categories : Java Script, Data Validation, Form Processing, Email, URLs | | | Hilight Form Element onFocus
Categories : Java Script, Form Processing, CSS | | | Zephyr: AJAX Based Framework for PHP5 Developers
Categories : PHP, AJAX, Frameworks, Java Script, Web Applications | | | javascript doesn't accept a fieldname with []
Categories : Java Script | |
| | | | Gustavo Cruz wrote : 1700
Your code crashes when you remove an input box in an
unnordened way, try this to check it out, first add the
1st, then the 2nd and finally the 3rd input box, then
remove the 3rd, then the 2nd and finally the 1st input
box, if you do this your code works correctly, but if you
remove any input box with no order, let say remove the
1st, then it crashes.
| | | | Justin Waggle wrote : 1731
I made a little change to the removeRow function that
allows it to delete textfields out of sequence. Please let
me know if you implement this! - Justin
function removeRow(tbl,num)
{
var table = document.getElementById(tbl);//adentification of table
try {
if(num >= row_no){
row_no--;
table.deleteRow(row_no);//deletion of the clicked row
}else{
row_no--;
table.deleteRow(num);//deletion of the clicked row
}
} catch (ex) {
alert(ex);
}
if(row_no<=3)//if row is less than 3 then the button will again appear to add row
{
document.getElementById("Button").style.display="block";
}
}
| | | | Justin Waggle wrote : 1732
Oops. I changed the element name at the bottom of my
example from "add" to "Button". Watch out for that! Using
the original example code above, it should still
be "add". -Justin
| | | | Jay G wrote : 1761
Code works great but how would you go about adding a unique value to each new textfield?
| | | | Pavel Terentyev wrote :1762
TiABWTDI (There is A Better Way To Do It)
<html>
<head>
<title>Dynamic Page</title>
<script language="javascript">
var initial_count = new Array();
var rows_limit = 0; // Set to 0 to disable limitation
function addRow(table_id)
{
var tbl = document.getElementById(table_id);
// counting rows in table
var rows_count = tbl.rows.length;
if (initial_count[table_id] == undefined)
{
// if it is first adding in this table setting initial rows count
initial_count[table_id] = rows_count;
}
// determining real count of added fields
var tFielsNum = rows_count - initial_count[table_id];
if (rows_limit!=0 && tFielsNum >= rows_limit) return false;
var text = 'Text field';
var input = '<input type="text" name="postvar[]" style="width:100%;"/>';
var remove= '<input type="button" value="X" onclick="removeRow(\''+table_id+'\',this.parentNode.parentNode)" style="width:100%;"/>';
try {
var newRow = tbl.insertRow(rows_count);
var newCell = newRow.insertCell(0);
newCell.innerHTML = text;
var newCell = newRow.insertCell(1);
newCell.innerHTML = input;
var newCell = newRow.insertCell(2);
newCell.innerHTML = remove;
} catch (ex) {
//if exception occurs
alert(ex);
}
}
function removeRow(tbl,row)
{
var table = document.getElementById(tbl);
try {
table.deleteRow(row.rowIndex);
} catch (ex) {
alert(ex);
}
}
</script>
</head>
<body>
<form name="form1" method="post" action="">
<table width="400" border="1" cellspacing="0" cellpadding="4" id="mytable">
<tr><th colspan="3"><h3>Dynamically Handled Table</h3></th></tr>
<tr><th colspan="3"><input type="button" name="Button" value="Add row" onClick="addRow('mytable')"></th></tr>
</table><br>
<table width="400" border="1" cellspacing="0" cellpadding="4" id="mytable1">
<tr><th colspan="3"><h3>Another dynamically Handled Table</h3></th></tr>
<tr><th colspan="3"><input type="button" name="Button" value="Add row" onClick="addRow('mytable1')"></th></tr>
</table>
</form>
</body>
</html>
| |
|
|
|
