CoderZone.org

Category: >> JavaScript >> Add more form fields Bookmark and Share

<< lastnext >>

Snippet Name: Add more form fields

Description: Dynamically add form fields to your forms.

Comment: (none)

Author: CoderZone
Language: JAVASCRIPT
Highlight Mode: JAVASCRIPT
Last Modified: February 27th, 2009

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link href="/style.css" rel="stylesheet" type="text/css" />
<title>More form fields</title>
<script type="text/javascript">
function addRowToTable()
{
  var tbl = document.getElementById('tblAddress');
  var lastRow = tbl.rows.length;
  // if there's no header row in the table, then iteration = lastRow + 1
  var iteration = lastRow;
//  var iteration = lastRow + 1;
  var row = tbl.insertRow(lastRow);
 
  //  cell 0
  var cell0 = row.insertCell(0);
  var el = document.createElement('input');
  el.type = 'text';
  el.name = 'Address[]';
  el.size = 30;
  cell0.appendChild(el);
 
  //cell 1
  var cell1 = row.insertCell(1);
  var el = document.createElement('input');
  el.type = 'text';
  el.name = 'City[]';
  el.size = 10;
  cell1.appendChild(el);
 
  //cell 2
  var cell2 = row.insertCell(2);
  var el = document.createElement('input');
  el.type = 'text';
  el.name = 'State[]';
  el.size = 2;
  cell2.appendChild(el);
 
   //cell 3
  var cell3 = row.insertCell(3);
  var el = document.createElement('input');
  el.type = 'text';
  el.name = 'Zip[]';
  el.size = 5;
  cell3.appendChild(el);
}
</script>
</head>
 
<body>
<h3>Dynamic add form fields</h3>
 
<br /><br /> 
<form action="Untitled-2.php" name="h" method="post">
 <table id="tblAddress">
                <tr>
                  <td class="txtBase">Address</td>
                  <td class="txtBase">City</td>
                  <td class="txtBase">State</td>
                  <td class="txtBase">Zip</td>
                </tr>
               <tr>
                  <td><input name="Address[]" type="text" size="30" maxlength="255"></td>
                  <td><input name="City[]" type="text" size="10" maxlength="255"></td>
                  <td><input name="State[]" type="text" size="2" maxlength="10"></td>
                  <td><input name="Zip[]" type="text" size="5" maxlength="25"></td>
    </tr>
  </table><input type="button" name="Add" value="Add" onClick="addRowToTable();">
               <input type="submit" name="Submit" value="Submit">
</form>
 
 
</body>
</html>
 
There haven't been any comments added for this snippet yet. You may add one if you like.  Add a comment 
© coderzone.org | users online: 6