WeberDev.com PHP and MySQL Code

LOG IN
BEGINNER GUIDESPHP CLASSESCODE SEARCHARTICLES SEARCHPHP FORUMSPHP MANUALPHP FUNCTIONS LISTWEB SITE TEMPLATES
Start typing to search for PHP and MySQL Code Snippets and Articles Search


Submit a code Example / Snippet Join us on FaceBook
Submit a code Example / Snippet Submit Your Code
Search Engine Optimization Monitor SEO Monitor
Web Site UpTime Monitor UpTime Monitor
Your Personal Examples List My Favorite Examples
Your Personal Articles List My Favorite Articles
Edit Account Info Update Your Profile
PHP Code Search
Web Development Forums
Learn MySQL Playing Trivia
PHPBB2 Templates
Web Development Resources
Web Development Content
PHPClasses
PHP Editor
PHP Jobs
Vision.To Design
Ajax Tutorials
PHP Programming Help
PHP/MySQL Programming
Webmaster Resources
Webmaster Forum
XML meta language
website builder



Go Back Add a Comment Send this example to a friend Add this Article to your personal favoritest for easy future access to your favorite Code Examples and Articles. Submit a code example Print this code example.
BACK ADD A COMMENT SEND TO A FRIEND ADD TO MY FAVORITES ADD CODE EXAMPLES PRINT
Title : Building a Dynamic Form using Javascript and innerHTML. Add form elements in realtime without refreshing the page.
Categories : Java Script, Form Processing
Prashant Sharma
Date : Aug 09th 2007
Grade : 3 of 5 (graded 16 times)
Viewed : 79816
File : No file for this code example.
Images : Image 1 , Image 2
Search : More code by Prashant Sharma
Action : Grade This Code Example
Tools : My Examples List

Submit your own code examples  Submit your own code examples 
 

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




Javascript URL and Email Validation
Categories : Java Script, Data Validation, Form Processing, Email, URLs
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
Form validations using javascript and including all validations in one message
Categories : HTML and PHP, Java Script, Form Processing
showing Help (assistance) to the user while filling html forms.
Categories : HTML, Java Script, 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
Hilight Form Element onFocus
Categories : Java Script, Form Processing, CSS
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
Adding a Filter to a Text Element
Categories : Java Script, Data Validation, Form Processing
Changing the Style of form objects using the JavaScript OnClick method.
Categories : Java Script, Form Processing, Beginner Guides, CSS
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
PHP and javascript mouseover, mouseout, and mousedown events
Categories : PHP, Java Script, Form Processing, Beginner Guides
JavaScript dropdown list menu to switch any page.
Categories : Java Script, Beginner Guides, Form Processing
Clock at Status Bar
Categories : Java Script, HTML, Date Time
How to get the Focus (Cursor) into a Form-Element.
Categories : HTML, 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>