creating variables from multile rows in table

inestine · September 28, 2011

ok, I'm not sure I know how to ask this question, but I've created a table that allows the user to add rows. The problem is, upon submit only the last row creates variables. How can I make sure every cell in every row sets a different variable?

This is going to be a purchase order system.

Here is my code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<title>Insert Table Row using DOM</title> 
<script language="javascript"> 
function addRow() 
{ 
var tbody = document.getElementById("po_table").getElementsByTagName("tbody")[0]; 
var row = document.createElement("TR"); 
var cell1 = document.createElement("TD");
var cell2 = document.createElement("TD");
var cell3 = document.createElement("TD"); 
var inp1 =  document.createElement("INPUT"); 
inp1.setAttribute("type","text"); 
inp1.setAttribute("name","quantity"); 
cell1.appendChild(inp1); 
var inp2 =  document.createElement("INPUT"); 
inp2.setAttribute("type","text"); 
inp2.setAttribute("name","description"); 
cell2.appendChild(inp2); 
var inp3 =  document.createElement("INPUT"); 
inp3.setAttribute("type","text"); 
inp3.setAttribute("name","unit_cost"); 
cell3.appendChild(inp3);
row.appendChild(cell1); 
row.appendChild(cell2); 
row.appendChild(cell3);
tbody.appendChild(row); 
//alert(row.innerHTML); 
} 
</script> 
</head> 
<body>
<form method="post" action="review_po.php">
<table id="po_table" border="1"> 
	<tbody>
		<tr>
			<th bgcolor="#c1c1c1">Quantity</th>
			<th bgcolor="#c1c1c1">Description</th>
			<th bgcolor="#c1c1c1">Unit Cost</th>
		</tr>
		<tr>
			<td><input type=text name="quantity"></td>
			<td><input type=text name="description"></td> 
			<td><input type=text name="unit_cost"></td> 

		</tr> 
	</tbody> 
	<tfoot>
		<tr>
			<th bgcolor="#e0e0e0">1</th>
			<th bgcolor="#e0e0e0">Shipping</th> 
			<td><input type=text name="shipping"></td> 

		</tr> 
		<tr>
			<th bgcolor="#e0e0e0">1</th>
			<th bgcolor="#e0e0e0">Tax</th> 
			<td><input type=text name="tax"></td> 

		</tr> 
	</tfoot>	
</table> 
<input type="button" value="Insert Row" onClick="addRow();"> 
<input type="submit" value="Review" name="review_po">
</form>


</body> 
</html>

right now it goes to this page:

<?php

//convert to variables
$quantity = $_POST['quantity'];
$description = $_POST['description'];
$unit_cost = $_POST['unit_cost'];
$extended_cost = $_POST['extended_cost'];
$shipping = $_POST['shipping'];
$tax = $_POST['tax'];

?>

<?php echo $quantity; ?><br>
<?php echo $description; ?><br>
<?php echo $unit_cost; ?><br>
<?php echo $extended_cost; ?><br>
<?php echo $shipping; ?><br>
<?php echo $tax; ?><br>

here is the page:

http://po.shopphgmag.com/create_po.html

Thanks for looking

Zane · September 28, 2011

The reason is only shows the bottom most input field.. is because they are all named the same.

You need to make arrays out of your new fields.

So in other words, in your form and addRow() function..

quantity needs to be quantity[]

description needs to be description[]

and etcetera.

The shipping and such do not need to be in an array.

inestine · September 28, 2011

how do I set the key for an array I don't know will exist?

$array[key+1] ???

xyph · September 28, 2011

Hopefully this example explains it.

<?php 

if( $_POST ) {
echo 'Form submitted<br><pre>';
print_r( $_POST );
echo '</pre>';
}

?>
<script type="text/javascript">
function add() {
	var list = document.getElementById('thisFormList');
	var li = document.createElement('li');
	var count = list.getElementsByTagName('li').length;
	li.innerHTML = '<label>Input box['+count+']: <input type="text" name="box[]"></label>';
	list.appendChild(li);
}
function remove( ) {
	var list = document.getElementById('thisFormList');
	list.removeChild( list.lastChild );
}
</script>
<form action="#" method="post" id="thisForm">
<div id="thisFormDiv">
	<ul style="list-style-type: none; padding: 0; margin-left: 0;" id="thisFormList">
		<li><label>Input box[0]: <input type="text" name="box[]"></label></li>
		<li><label>Input box[1]: <input type="text" name="box[]"></label></li>
		<li><label>Input box[2]: <input type="text" name="box[]"></label></li>
	</ul>
	<input type="button" value="Add" onclick="add()">
	<input type="button" value="Remove" onclick="remove()">
	<input type="submit">
</div>
</form>

inestine · September 28, 2011

Awesome!. That was exactly what I needed. Thanks for the push

Here is the code I used for anyone else...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<title>Insert Table Row using DOM</title> 
<script language="javascript"> 
function addRow() 
{ 
var tbody = document.getElementById("po_table").getElementsByTagName("tbody")[0]; 
var row = document.createElement("TR"); 
var cell1 = document.createElement("TD");
var cell2 = document.createElement("TD");
var cell3 = document.createElement("TD"); 
var inp1 =  document.createElement("INPUT"); 
inp1.setAttribute("type","text"); 
inp1.setAttribute("name","quantity[]"); 
cell1.appendChild(inp1); 
var inp2 =  document.createElement("INPUT"); 
inp2.setAttribute("type","text"); 
inp2.setAttribute("name","description[]"); 
cell2.appendChild(inp2); 
var inp3 =  document.createElement("INPUT"); 
inp3.setAttribute("type","text"); 
inp3.setAttribute("name","unit_cost[]"); 
cell3.appendChild(inp3);
row.appendChild(cell1); 
row.appendChild(cell2); 
row.appendChild(cell3);
tbody.appendChild(row);
}

function remove( ) {
	var list = document.getElementById('po_table');
	list.removeChild( list.lastChild );
}  
</script> 
</head> 
<body>
<form method="post" action="review_po.php">
<table id="po_table" border="1"> 
	<tbody>
		<tr>
			<th bgcolor="#c1c1c1">Quantity</th>
			<th bgcolor="#c1c1c1">Description</th>
			<th bgcolor="#c1c1c1">Unit Cost</th>
		</tr>
		<tr>
			<td><input type=text name="quantity[]"></td>
			<td><input type=text name="description[]"></td> 
			<td><input type=text name="unit_cost[]"></td> 

		</tr> 
	</tbody> 
	<tfoot>
		<tr>
			<th bgcolor="#e0e0e0">1</th>
			<th bgcolor="#e0e0e0">Shipping</th> 
			<td><input type=text name="shipping"></td> 

		</tr> 
		<tr>
			<th bgcolor="#e0e0e0">1</th>
			<th bgcolor="#e0e0e0">Tax</th> 
			<td><input type=text name="tax"></td> 

		</tr> 
	</tfoot>	
</table> 
<input type="button" value="Insert Row" onClick="addRow();"> 
<input type="button" value="Remove" onclick="remove()">
<input type="submit" value="Review" name="review_po">
</form>


</body> 
</html>

maybe a nudge on turning the array into variables on the next page???

inestine · September 28, 2011

Nevermind...

I got it.

<?php 

for($i = 0;$i < count($_POST['quantity']);$i++){
        echo $_POST['quantity'][$i] . " - " . $_POST['description'][$i] . " - " . $_POST['unit_cost'][$i] . "<br>";
}


?>

Sign In

creating variables from multile rows in table

Recommended Posts

inestine

Link to comment

Share on other sites

Zane

Link to comment

Share on other sites

inestine

Link to comment

Share on other sites

xyph

Link to comment

Share on other sites

inestine

Link to comment

Share on other sites

inestine

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information