Code solutions to PHP, JS, CSSCode source PHP, JS, CSS

Spread your code soluces to the world

Love me
Solucior » PHP » Dynamically add rows to a form. Complete solution

Dynamically add rows to a form. Complete solution

05/21/2011 by Dux   -   3.5/5 (22 ratings)

Here is a complete solution for adding rows to a form. This sample script displays a form for insert and update products. When clicking on the link [+], we add a new product line.
It also includes the update by sending the "mod" parameter corresponding to the ID of the MySQL table row to edit.

Dynamic system for adding rows :
Initially, the PHP script creates 100 form lines, but displays only the first. The following are hidden by the CSS display:none.
The names of the form fields are one array that is incremented every row. When recording, this table is serialized into a string of characters to fit into a MySQL TEXT type field. To retrieve this table, simply use the opposite function : unserialize()

See a demonstration of this script in action :

Open in a new window     Open in the same window

source code

= addslashes($_REQUEST['mod']);

// Save in DB
if (isset($_POST['text'])) {
$text = $_POST['text'];
$line = serialize($text);
   if (
$mod == '') {
       // $res = mysql_query( "INSERT INTO table VALUES ('', '".$line."', '".time()."')" );
} else {
       // $res = mysql_query( "UPDATE table SET product_line = '".$line."', date = '".time()."' WHERE id = ".$mod );

// Preparing update
if ($mod != '') {
$res = mysql_query( "SELECT * FROM table WHERE id = ".$mod);
$r = mysql_fetch_array($res);
$text = unserialize( $r['product_line'] );
$nbr_ligne = count( $text['detail'] );

// Display the form
echo '
<form method="post" action="/script.php">
   <input type="hidden" name="mod" value="'
.$mod.'" />
   <table style="width: 700px">

// Loop to prepare the display of 100 product lines
for ($i=0; $i<100; $i++) {
   if (
$text['quantity'][$i] == "") $text['quantity'][$i] = 1;
   if (
$text['unit'][$i] == "") $text['unit'][$i] = "0.00";
// Display only the first line
if ($nbr_ligne == 0) $nbr_ligne = 1;
   if (
$i >= $nbr_ligne) $display = 'style="display:none"';
   <tr id="cell'
.$i.'" '.$display.'>
           <textarea name="text[detail]['
           <br />
           <a href="javascript:void(0)" onclick="javascript:document.getElementById(\'cell'
           <input name="text[quantity]['
.$i.']" id="q'.$i.'" value="'.stripslashes($text['quantity'][$i]).'" size="4" />
           <input name="text[unit]['
.$i.']" id="u'.$i.'" value="'.stripslashes($text['unit'][$i]).'" size="7" /> USD

   <input type="submit" value="Save" />

Tested with Safari  Google Chrome  Firefox3  Firefox4  Opera  IE6  IE7  IE8  
Rate this code     |     Copied : 289x

Comments for Dynamically add rows to a form. Complete solution

RussellDaf     01/28/2017 19:02
No need to look anywhere else, the most advanced Pokemon Duel Cheat is available right now for you to download. Promo: BODM77BWH223BE
Johne209     01/01/2015 05:37
Very well written article. It will be helpful to anyone who usess it, as well as yours truly
rem     02/12/2013 15:24
Nico     01/05/2012 08:15
Serialize function doesnt transmit the null value of the array
D6_     01/04/2012 05:57
Question - If you create a hundred form elements, displayed or not, when the user hits submit, that info is passed to the action page.  How does the action page know to only look at the number of elements that was chosen by the user?
Add a comment Nickname   Site