<html>
<head>
<script language="JavaScript">

/**
 *
 */
function buildField($number, $name, $type)
{
    // --- create row ---
    $row = document.createElement("tr");
    $row.setAttribute('id', 'field_' + $number);
    
    // --- column with field name ---
    $td1 = document.createElement("td");
    $td1.appendChild(document.createTextNode($name));
    
    $hidden_name = document.createElement('input');
    $hidden_name.setAttribute('type', 'hidden');
    $hidden_name.setAttribute('name', 'field_'+$number+'_name');
    $hidden_name.setAttribute('value', $name);
    $td1.appendChild($hidden_name);
    
    // --- column with input field ---
    $td2 = document.createElement("td");
    switch ($type)
    {
        case 'textarea':
            $input = document.createElement('textarea');
            $input.setAttribute('name', 'field_'+$number+'_value');
        break;
        case 'text':
        default:
            $input = document.createElement('input');
            $input.setAttribute('type', 'text');
            $input.setAttribute('name', 'field_'+$number+'_value');
    }
    $td2.appendChild ($input);
    
    // --- column with buttons ---
    $td3 = document.createElement("td");
    
    $button_up = document.createElement('input');
    $button_up.setAttribute('type', 'button');
    $button_up.setAttribute('value', ' ^ ');
    if ((document.all)&&(document.getElementById)) // workaround for IE 5.x
        $button_up["onclick"]= new Function('moveFieldUp(\'field_'+$number+'\');');
    else // normal way
        $button_up.setAttribute('onclick', 'moveFieldUp(\'field_'+$number+'\');');
    $td3.appendChild ($button_up);
    
    $button_down = document.createElement('input');
    $button_down.setAttribute('type', 'button');
    $button_down.setAttribute('value', ' v ');
    if ((document.all)&&(document.getElementById)) // workaround for IE 5.x
        $button_down["onclick"]= new Function('moveFieldDown(\'field_'+$number+'\');');
    else // normal way
        $button_down.setAttribute('onclick', 'moveFieldDown(\'field_'+$number+'\');');
    $td3.appendChild ($button_down);
    
    $button_rm = document.createElement('input');
    $button_rm.setAttribute('type', 'button');
    $button_rm.setAttribute('value', ' x ');
    if ((document.all)&&(document.getElementById)) // workaround for IE 5.x
        $button_rm["onclick"]= new Function('removeField(\'field_'+$number+'\');');
    else // normal way
        $button_rm.setAttribute('onclick', 'removeField(\'field_'+$number+'\');');
    
    $td3.appendChild ($button_rm);
    
    // --- append all columns to row ---
    $row.appendChild($td1);
    $row.appendChild($td2);
    $row.appendChild($td3);
    
    // --- return row ---
    return $row;
}

function getPlaceInTable($id)
{
    $order = document.getElementById('field_order');
    $orderList = $order.split(',');
    for ($i = 0; $i < $orderList.length; $i++)
    {
        if ($orderList[$i] == $id)
            return $i;
    }
}

//--------------------------

function deleteArrayValue($array, $value)
{
    $length = $array.length;
    $found = 0;
    
    for ($i = 0; $i < $length; $i++)
    {
        if ($array[$i] == $value)
            $found = 1;
        
        if ($found)
            $array[$i] = $array[$i+1];
    }
    
    $array.length = $length - 1;
    
    return $array;
}

function switchArrayValues($array, $value1, $value2)
{
    $length = $array.length;
    $index1 = 0;
    $index2 = 0;
    
    for ($i = 0; $i < $length; $i++)
    {
        if ($array[$i] == $value1)
            $index1 = $i;
        if ($array[$i] == $value2)
            $index2 = $i;   
    }
    
    $temp = $array[$index1];
    $array[$index1] = $array[$index2];
    $array[$index2] = $temp;
    
    return $array;
}

//--------------------------

function addField($name, $type)
{
    $field_max = document.getElementById('field_max');
    $field_max.value++;
    
    $table = document.getElementById('field_table');
    $tbody = $table.getElementsByTagName("tbody")[0];
    
    $tbody.appendChild(buildField($field_max.value, $name, $type));
    
    // add id to order:
    $field_order = document.getElementById('field_order');
    $field_order.value = $field_order.value + ',field_' + $field_max.value
}

function removeField($id)
{
    $row = document.getElementById($id);
    
    $parent = $row.parentNode;
    $parent.removeChild($row);
    
    // remove id from order:
    $field_order = document.getElementById('field_order');
    $orderList = $field_order.value.split(',');
    $orderList = deleteArrayValue($orderList, $id);
    $field_order.value = $orderList.join(',');
}

function moveFieldUp($id)
{
    $row = document.getElementById($id);
    $parent = $row.parentNode;
    
    if ($prev = $row.previousSibling)
    {
        $row = $parent.replaceChild($prev, $row);
        $parent.insertBefore($row, $prev);
    }
    
    // update order:
    $field_order = document.getElementById('field_order');
    $orderList = $field_order.value.split(',');
    $orderList = switchArrayValues($orderList, $row.id, $prev.id);
    $field_order.value = $orderList.join(',');
}

function moveFieldDown($id)
{
    $row = document.getElementById($id);
    $parent = $row.parentNode;
    
    if ($next = $row.nextSibling)
    {
        $next = $parent.replaceChild($row, $next);
        $parent.insertBefore($next, $row);
    }
    
    // update order:
    $field_order = document.getElementById('field_order');
    $orderList = $field_order.value.split(',');
    $orderList = switchArrayValues($orderList, $row.id, $next.id);
    $field_order.value = $orderList.join(',');
}

</script>
</head>
<body>

<form method="POST">
<table border="1" id="field_table">
<tbody><tr id="field_1">
    <td>name1<input type="hidden" name="field_1_name" value="name1"></td>
    <td><input type="text" name="field_1_value"></td>
    <td><input type="button" onclick="moveFieldUp('field_1');" value=" ^ "><input type="button" onclick="moveFieldDown('field_1');" value=" v "><input type="button" onclick="removeField('field_1');" value=" x "></td>
</tr><tr id="field_2">
    <td>name2<input type="hidden" name="field_2_name" value="name2"></td>
    <td><textarea name="field_2_value"></textarea></td>
    <td><input type="button" onclick="moveFieldUp('field_2');" value=" ^ "><input type="button" onclick="moveFieldDown('field_2');" value=" v "><input type="button" onclick="removeField('field_2');" value=" x "></td>
</tr><tr id="field_3">
    <td>name3<input type="hidden" name="field_3_name" value="name3"></td>
    <td><input type="text" name="field_3_value"></td>
    <td><input type="button" onclick="moveFieldUp('field_3');" value=" ^ "><input type="button" onclick="moveFieldDown('field_3');" value=" v "><input type="button" onclick="removeField('field_3');" value=" x "></td>
</tr></tbody>
</table>
<input type="submit" value="Submit form">

<hr>
Field max: <input type="text" id="field_max" name="field_max" value="3" readonly>
<br>Field order: <input type="text" id="field_order" name="field_order" value="field_1,field_2,field_3" readonly>
</form>

<hr>
<input type="text" id="new_field_name" name="new_field_name">
<select id="new_field_type" name="new_field_type">
    <option value="text">one line</option>
    <option value="textarea">multiple line</option>
</select>
<input type="button" onclick="addField(document.getElementById('new_field_name').value, document.getElementById('new_field_type').value);" value="Add field">

<?php

if (sizeof($_POST))
{
    echo 
'<hr>';
    echo 
'<h3>POST values:</h3>';
    echo 
'<table border="1">';
    echo 
'<tr><td>#</td><td>Name:</td><td>Value:</td></tr>';
    
    
$fields explode(','$_POST['field_order']);
    foreach (
$fields as $i => $field)
    {
        echo 
'<tr>';
        echo 
'<td>'.($i+1).'</td>';
        echo 
'<td>'.$_POST[$field.'_name'].'</td>';
        echo 
'<td>'.$_POST[$field.'_value'].'</td>';
        echo 
'</tr>';
    }
    
    echo 
'</table>';
    
    echo 
'<form method="GET"><input type="submit" value="Reset form"></form>';
}


?>
<hr>
<a href="http://www.opensource.org/"><img align="right" alt="" border="0" hspace="10" src="http://www.opensource.org/trademarks/opensource/web/opensource-55x48.gif" vspace="2"></a>
<a href="source.php">View source</a>.
<br>The script has been tested and works nicely on Internet Explorer 5.0, FireFox 0.8 and Opera 7.50. On Opera 6.05 the dynamic features do not work, but the form works ok.<br>
<br>&copy; 2004 Emilis Dambauskas under <a href="http://www.opensource.org/licenses/mit-license.php">MIT license</a> (open source).


</body>
</html>