Jump to content

creating variables from multile rows in table

inestine

By inestine
in PHP Coding Help

 Share

Recommended Posts

inestine Newbie

inestine

Posted
Posted

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 Prolific Member

Zane

Posted
Posted

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.

xyph Advanced Member

xyph

Posted
Posted

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 Newbie

inestine

Posted
  • Author
Posted

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???

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.