Adding blank colomns to a form to enter data

#1

I created a colomn with descriptions of data and another colomn for the data to go in. I want to add a button at the bottom to be able to activate it and add another colomn to add more data or how ever many colomns I need. Basically Im trying to add readings I take off equipment at jobs i go to and some times there may be 2 or more pieces of equipment. So i made a html file with the decription names and another for a blank colomn that has differnet types of data to input. where do i begin? help me obi one php

heres a picture oif what i got so far. gonna have to split the decription colomn from the data colomn to make it easier or can i just copy the data colomn to add another.
checklist

the process button will save to data base and the another button would add another blank data colomn next to the first one

#2

this design is complex and any solutions could also be complex.

first of all, are you using html table to display these “columns” or is this css? I think it is a table, which makes adding cells via looping a difficult task because the entire table would have to be read in order for a new cell to be added. I would nest tables, then add a new table using an if block which evaluates a true or false, 1 or 0 flag. If true or 1, then loop and add this table. Then you could avoid dealing with existing tables, rows and cells.

looping is your answer for adding a table column and for collecting and saving data to a database.

<table border="0" cellpadding="2" cellspacing="2">
<tr valign="top"><td>

  <table border="0" cellpadding="2" cellspacing="2">
   <tr valign="top">
     <td>1</td>
   </tr>
  </table>

</td><td>

  <table border="0" cellpadding="2" cellspacing="2">
   <tr valign="top">
     <td>2</td>
   </tr>
  </table>

</td>
<?php if ($addColumn) { ?>
<td>

  <table border="0" cellpadding="2" cellspacing="2">
   <?php //loop the rows and cells { ?>
   <tr valign="top">
     <td><?php //cell data ?></td>
   </tr><?php } ?>
  </table>

</td>
<?php } ?>
</tr>
</table>

edit: i meant to say loop rows and cells. sorry.

#3

You are looking at a complex design to do this correctly, and a few tables just to handle it partially.

So, we have this at work, because I work in the manufacturing industry, currently. Our equipment has a base type, and item type, and item attributes, at a minimum.

So, how much data do you need to store, and how much configuration do you actually want to do?

1 Like
#4

For the moment just the data that the picture shows. some data is a pull down menu, numbers and strings. The thing is some jobs I go to have more than one system I am checking over. So I want to be able to add another colomn to enter data on the other system or systems.

#5

Dynamically produce (and process) the form, using a data driven design, where the form fields are defined in a data structure (array.) See the following example -

<?php

// recursive trim call-back function
function _trim($val)
{
	if(is_array($val))
	{
		return array_map('_trim',$val);
	} else {
		return trim($val);
	}
}


// define the form fields. the main array index is the field name. 
$fields = [];
$fields['field_A'] = ['label'=>'field name a', 'type'=>'text'];
$fields['field_B'] = ['label'=>'field name b', 'type'=>'select', 'options'=>[1=>'option 1',2=>'option 2']];
// note: if more than one select field uses the same option choices, define the options array separately and use it in as many places as needed
$fields['field_C'] = ['label'=>'field name c', 'type'=>'text'];

// you can add elements to the $fields entries to control dynamic validation and usage logic


$errors = []; // array to hold validation errors
$post = []; // array to hold a trimmed working copy of the current data (if editing existing data, fetch it into $post)

// post method form processing
if($_SERVER['REQUEST_METHOD'] == 'POST')
{
	$post = array_map('_trim',$_POST); // get a trimmed copy of the submitted data - use $post in the remainder of the code
	
	if(isset($post['submit']))
	{
		// examine the submitted data
		echo '<pre>'; print_r($post); echo '</pre>';
		
		// dynamically validate, then use the submitted form data here... store validation errors in the $errors array.
		
	}
}



// at the point of producing the html form/table

$cols = $post['cols'] ?? 1; // default to 1 column
if(isset($post['add']))
{
	$cols++;
}
if(isset($post['sub']) && $cols > 1)
{
	// note: this will remove any values that have been entered in the last column
	$cols--;
}

?>

<form method='post'>
<input type='hidden' name='cols' value='<?php echo $cols; ?>'>
<table border='1'>
<?php
foreach($fields as $name=>$arr)
{
	echo "<tr><td>{$arr['label']}</td>";
	foreach(range(1,$cols) as $col)
	{
		echo "<td>";
		switch ($arr['type'])
		{
			case 'text':
			// use for any of the input types except radio and checkbox, which must be handled differently
			echo "<input type='{$arr['type']}' name='{$name}[$col]' value='".htmlentities($post[$name][$col] ?? '',ENT_QUOTES)."'>";
			break;
			
			case 'select':
			echo "<select name='{$name}[$col]'>";
			foreach($arr['options'] as $value=>$label)
			{
				$sel = isset($post[$name][$col]) && $post[$name][$col] == $value ? ' selected' : '';
				echo "<option value='$value'$sel>$label</option>";
			}
			echo "</select>";
			break;
		}
		echo "</td>";
	}
	echo "</tr>\n";
}
?>
</table>
<input type='submit' name='submit' value='Process'><input type='submit' name='add' value='Add Unit'><input type='submit' name='sub' value='Remove Unit'>
</form>

Note: use css for styling the table (the example uses the old border attribute for simplicity.)

2 Likes