Dynamic Form

tutorialstuff · February 29, 2008

I have a form in which users can add as many items to it as they want and I am stuck on how to do this. I want the form to look like this (http://tutorialstuff.com/test/formsmall.html) where there is only one line of form fields and each time they click add item it adds the item to a table above the form and when they are all done adding items and filling out the rest of the info they click submit and send the info to the database.

How would I go about doing this? I don’t want any of the information submitted to the database until after they hit the submit button not the add item button.

Any help would be appreciated!

Thanks - Mike

ignace · February 29, 2008

<?php

if (strcmp(strtolower($_SERVER['REQUEST_METHOD']), 'post') === 0) { // form submitted
    if (array_key_exists('add_item', $_POST)) {
         // user is adding items
    } else if (array_key_exists('form_submit', $_POST)) {
        // user is submitting the form
    }
}

?>

Psycho · February 29, 2008

I *think* he is wanting to add additional fields on the page without having to submit the page - i.e. add all the items at once and then submit the page.

You will need JavaScript to do this. Here is a working page that demonstrates one way to accomplish that:

<html>
<head>

<script>

function addTiming(field) {

  thisFieldIdx = field.id.substr(6);
  newFieldIdx  = thisFieldIdx*1 + 1;

  if (!document.getElementById('timing'+newFieldIdx)) {
    timingDiv = document.getElementById('timings');
    timingDiv.innerHTML = timingDiv.innerHTML +
    'Timing '+newFieldIdx+': <input type="text" name="timing'+newFieldIdx+'" id="timing'+newFieldIdx+'" onfocus="addTiming(this);"><br>';
  }

  document.getElementById('timing'+thisFieldIdx).select();
  document.getElementById('timing'+thisFieldIdx).focus();
  return;
}

</script>
</head>

<body>
<form name="formname">

<div id="timings">

Timing 1: <input type="text" name="timing1" id="timing1"><br>
Timing 2: <input type="text" name="timing2" id="timing2"><br>
Timing 3: <input type="text" name="timing3" id="timing3"><br>
Timing 4: <input type="text" name="timing4" id="timing4" onfocus="addTiming(this);"><br>

</form>
</div>

</body>
</html>

Psycho · February 29, 2008

OK, I just reread your post and you want the items added to a table each time they click the button and then submit everything. A little different from what I proposed, but it is still a javascript solution. Of course you could do it with AJAX as well.

tutorialstuff · February 29, 2008

This is what I want (http://tutorialstuff.com/test/formsmall.php) except I want the items to stay in the table instead of dissipater and then submit it all at once like you were saying.

BTW the link in this post is different than the one up top.

-Mike

tutorialstuff · February 29, 2008

I'm actually ok with having the page submit dynamically with ajax would be nice but is not necessary.

Here's what my code looks like:

<?php 
if ($_POST['item_count'] == ''){
$item_count = 1;
}else{
$item_count = $_POST['item_count'];
}
?>
<html>
<head>

</head>

<body>
<form action="" method="post">
<table cellpadding="5" cellspacing="0">
<tr>

	<th>#</th>
	<th>Qty.</th>
	<th>Window Type</th>
	<th>Width</th>
	<th>Height</th>
	<th>Room Location</th>

	<th>Manufacture 1</th>
	<th></th>
</tr>
<?php
if (isset($_POST['add'])=='Add Item'){
$item_count = $item_count +1;
print "
	<tr>
		<td>$_POST[item_count]</td>
		<td>$_POST[qty]</td>
		<td>$_POST[window]</td>
		<td>$_POST[width]</td>
		<td>$_POST[height]</td>
		<td>$_POST[room]</td>
		<td>$_POST[manufacturer]</td>
	</tr>\n";

}

?>
<tr bgcolor="#ececec">
	<td><?php print "$item_count"; ?></td>
	<td><input type="text" size="3" name="qty" value="" /></td>
	<td>

		<select name="window">
			<option value="">...Choose</option>
			<option value="Window 1">A - Slider (left to right)</option>
			<option value="Window 2"> Slider (right to left)</option>
			<option value="Window 3">3 lite slider</option>
			<option value="Window 4">Picture Window</option>
			<option value="Round Top">Round Top</option>
			<option value="Single Hung">Single Hung</option>
			<option value="Garden Window">Garden Window</option>
			<option value="Bay Window">Bay Window</option>
			<option value="Casement">Casement</option>
			<option value="Awning">Awning</option>
			<option value="Sliding Glass Doors">Sliding Glass Doors</option>
			<option value="3 lite Sliding Patio Door">3 lite Sliding Patio Door</option>
			<option value="French Door">French Door</option>
		</select>
	</td>
	<td><input type="text" size="8" name="width" value="" /></td>
	<td><input type="text" size="8" name="height" value="" /></td>

	<td>
		<select name="room">
			<option value="">...Choose</option>
			<option value="Location 1">Bedroom</option>
			<option value="Location 2">Living/Family Room</option>
			<option value="Location 3">Dinning Room</option>
			<option value="Location 4">Kitchen</option>
			<option value="Location 4">Utility Room</option>
			<option value="Location 4">Garage</option>
		</select>
	</td>
	<td>
		<select name="manufacturer">
			<option value="">...Choose</option>

			<option value="Manufacture 1">Cascade Windows</option>
			<option value="Manufacture 2">Certainteed Windows</option>
			<option value="Manufacture 3">Comfort Design Inc.</option>
			<option value="Manufacture 4">Empire Pacific Windows</option>
			<option value="Manufacture 5">LBL Windows</option>
			<option value="Manufacture 6">Marvin Windows</option>
			<option value="Manufacture 7">Milgard Windows</option>
		</select>
	</td>
	<td><input type="submit" name="add" value="Add Item" /></td>
</tr>
<tr><td colspan="8"><input type="submit" value="submit" /></td></tr>
</table>
<input type="hidden" name="item_count" value="<?php print $item_count; ?>" />
</form>

</body>
</html>

Psycho · February 29, 2008

OK, here is something I did quick and dirty. It works but will need more functionality and validation to be finished:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript">

 function valueField(fieldName, formObj) {

   var fieldObj = formObj[fieldName];
   var fieldValue = fieldObj.value;
   fieldName = fieldName + '[]';

   var inputTxt = '<input type="text" name="'+fieldName+'" value="'+fieldValue+'"';
      inputTxt += ' readonly="readonly" style="background-color:#cecece" />';
   inputObj = document.createElement(inputTxt);

   return inputObj;
 }

 function addRow(tableID)
 {

   // Get a reference to the form
   var formObj = document.getElementById('addItem');

   // Get a reference to the table
   var tableRef = document.getElementById(tableID);

   // Insert a row in the table at row index 0
   var newRow   = tableRef.insertRow(tableRef.rows.length);

   // Insert the cells left to right
   var newCell  = newRow.insertCell(0);
   newCell.appendChild(valueField('mfgr', formObj));

   var newCell  = newRow.insertCell(0);
   newCell.appendChild(valueField('location', formObj));

   var newCell  = newRow.insertCell(0);
   newCell.appendChild(valueField('height', formObj));

   var newCell  = newRow.insertCell(0);
   newCell.appendChild(valueField('width', formObj));

   var newCell  = newRow.insertCell(0);
   newCell.appendChild(valueField('wtype', formObj));

   var newCell  = newRow.insertCell(0);
   newCell.appendChild(valueField('qty', formObj));

   //Clear form values
   formObj.mfgr.value = '';
   formObj.location.value = '';
   formObj.height.value = '';
   formObj.width.value = '';
   formObj.wtype.value = '';
   formObj.qty.value = '';

   document.getElementById('submitButton').disabled = false;
 }

// Call addRow() with the ID of a table


</script>
</head>

<body>
<form name="valuesToSubmit">
<table id="itemList" border="1px"; style="width:800px;background-color:#cecece;">
   <tr>
       <th>Qty.</th>
       <th>Window Type</th>
       <th>Width</th>
       <th>Height</th>
       <th>Room Location</th>
       <th>Manufacture 1</th>
   </tr>
</table>

<button type="submit" name="submit" id="submitButton" disabled="disabled">Submit the Values</button>
</form>


<form id="addItem">
<table cellpadding="5" cellspacing="0">
<tr>

	<th>#</th>
	<th>Qty.</th>
	<th>Window Type</th>
	<th>Width</th>
	<th>Height</th>
	<th>Room Location</th>

	<th>Manufacture 1</th>
	<th></th>
</tr>
<tr bgcolor="#ececec">
	<td>1.</td>
	<td><input type="text" size="3" name="qty" value="" /></td>
	<td>

		<select name="wtype">
			<option value="">...Choose</option>
			<option value="Window 1">A - Slider (left to right)</option>
			<option value="Window 2"> Slider (right to left)</option>
			<option value="Window 3">3 lite slider</option>
			<option value="Window 4">Picture Window</option>

			<option value="Round Top">Round Top</option>
			<option value="Single Hung">Single Hung</option>
			<option value="Garden Window">Garden Window</option>
			<option value="Bay Window">Bay Window</option>
			<option value="Casement">Casement</option>
			<option value="Awning">Awning</option>

			<option value="Sliding Glass Doors">Sliding Glass Doors</option>
			<option value="3 lite Sliding Patio Door">3 lite Sliding Patio Door</option>
			<option value="French Door">French Door</option>
		</select>
	</td>
	<td><input type="text" size="8" name="width" value="" /></td>
	<td><input type="text" size="8" name="height" value="" /></td>

	<td>
		<select name="location">
			<option value="">...Choose</option>
			<option value="Location 1">Bedroom</option>
			<option value="Location 2">Living/Family Room</option>
			<option value="Location 3">Dinning Room</option>
			<option value="Location 4">Kitchen</option>

			<option value="Location 4">Utility Room</option>
			<option value="Location 4">Garage</option>
		</select>
	</td>
	<td>
		<select name="mfgr">
			<option value="">...Choose</option>

			<option value="Manufacture 1">Cascade Windows</option>
			<option value="Manufacture 1">Certainteed Windows</option>
			<option value="Manufacture 2">Comfort Design Inc.</option>
			<option value="Manufacture 3">Empire Pacific Windows</option>
			<option value="Manufacture 4">LBL Windows</option>
			<option value="Manufacture 4">Marvin Windows</option>

			<option value="Manufacture 4">Milgard Windows</option>
		</select>
	</td>
	<td><button onclick="addRow('itemList');">Add Items</button></td>
</tr>
</table>
</form>

</body>
</html>

tutorialstuff · February 29, 2008

I put that code that you suggested here: http://tutorialstuff.com/test/line-add.php and it didn't work.

tutorialstuff · February 29, 2008

I've changed a bit of my code below

<?php 
if ($_POST['item_count'] == ''){
$item_count = 1;
}else{
$item_count = $_POST['item_count'];
}
?>
<html>
<head>

</head>

<body>
<form action="" method="post">
<table cellpadding="5" cellspacing="0">
<tr>

	<th>#</th>
	<th>Qty.</th>
	<th>Window Type</th>
	<th>Width</th>
	<th>Height</th>
	<th>Room Location</th>

	<th>Manufacture 1</th>
	<th></th>
</tr>
<?php
if (isset($_POST['add'])=='Add Item'){
$item['$item_count']['qty'] = $_POST['qty'];
$item['$item_count']['window'] = $_POST['window'];
$item['$item_count']['width']=$_POST['width'];
$item['$item_count']['height']=$_POST['height'];
$item['$item_count']['room']=$_POST['room'];
$item['$item_count']['manufacturer']=$_POST['manufacturer']; 

print "
	<tr>
		<td> </td>
		<td>".$item['$item_count']['qty']."</td>
		<td>".$item['$item_count']['window']."</td>
		<td>".$item['$item_count']['width']."</td>
		<td>".$item['$item_count']['height']."</td>
		<td>".$item['$item_count']['room']."</td>
		<td>".$item['$item_count']['manufacturer']."</td>
	</tr>\n";
$item_count = $item_count +1;
}

?>
<tr bgcolor="#ececec">
	<td><?php print "$item_count"; ?></td>
	<td><input type="text" size="3" name="qty" value="" /></td>
	<td>

		<select name="window">
			<option value="">...Choose</option>
			<option value="Window 1">A - Slider (left to right)</option>
			<option value="Window 2"> Slider (right to left)</option>
			<option value="Window 3">3 lite slider</option>
			<option value="Window 4">Picture Window</option>
			<option value="Round Top">Round Top</option>
			<option value="Single Hung">Single Hung</option>
			<option value="Garden Window">Garden Window</option>
			<option value="Bay Window">Bay Window</option>
			<option value="Casement">Casement</option>
			<option value="Awning">Awning</option>
			<option value="Sliding Glass Doors">Sliding Glass Doors</option>
			<option value="3 lite Sliding Patio Door">3 lite Sliding Patio Door</option>
			<option value="French Door">French Door</option>
		</select>
	</td>
	<td><input type="text" size="8" name="width" value="" /></td>
	<td><input type="text" size="8" name="height" value="" /></td>

	<td>
		<select name="room">
			<option value="">...Choose</option>
			<option value="Location 1">Bedroom</option>
			<option value="Location 2">Living/Family Room</option>
			<option value="Location 3">Dinning Room</option>
			<option value="Location 4">Kitchen</option>
			<option value="Location 4">Utility Room</option>
			<option value="Location 4">Garage</option>
		</select>
	</td>
	<td>
		<select name="manufacturer">
			<option value="">...Choose</option>

			<option value="Manufacture 1">Cascade Windows</option>
			<option value="Manufacture 2">Certainteed Windows</option>
			<option value="Manufacture 3">Comfort Design Inc.</option>
			<option value="Manufacture 4">Empire Pacific Windows</option>
			<option value="Manufacture 5">LBL Windows</option>
			<option value="Manufacture 6">Marvin Windows</option>
			<option value="Manufacture 7">Milgard Windows</option>
		</select>
	</td>
	<td><input type="submit" name="add" value="Add Item" /></td>
</tr>
<tr><td colspan="8"><input type="submit" value="submit" /></td></tr>
</table>
<input type="hidden" name="item_count" value="<?php print $item_count; ?>" />
</form>

</body>
</html>

Can I put this part into an array and pass it each time I add a new item some how?

$item['$item_count']['qty'] = $_POST['qty'];
$item['$item_count']['window'] = $_POST['window'];
$item['$item_count']['width']=$_POST['width'];
$item['$item_count']['height']=$_POST['height'];
$item['$item_count']['room']=$_POST['room'];
$item['$item_count']['manufacturer']=$_POST['manufacturer'];

Psycho · February 29, 2008

I put that code that you suggested here: http://tutorialstuff.com/test/line-add.php and it didn't work.

The page at the link you provided works for me. The code I provided is only a rough framework. There is still a lot of work that needs to be done (Much more than I am willing to provide). But, realize that the page should now have 2 forms. The original form you had is only for adding the data to the table which is another form. That is the form that should get submitted for processing.

Sign In

Dynamic Form

Recommended Posts

tutorialstuff

Link to comment

Share on other sites

ignace

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

tutorialstuff

Link to comment

Share on other sites

tutorialstuff

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

tutorialstuff

Link to comment

Share on other sites

tutorialstuff

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information