Phpmyadmin style add column

[newbie14]

Dear All,
I would like to add a new row tex boxed into my form just like when we add column for a new table under phpmyadmin where the option of Add number of column and then press the button go when we try to structure a new table. How can I implement it in my php page that concept? Thank you.

[diafol]

You need js (ajax) to do it without page load.
If you don't care about page load, you need to pass the variables via form to $_POST variable which will display new columns. Why not include your current code - see how far you've got?

[newbie14]

Dear Ardav,
Ok below is my current code. I dont know how to proceed further. Where should I put the button for add more rows? The current add is actually to submit the form.

<table> 
<tr>

<form action="<?=$_SERVER['PHP_SELF']?>" method="post" name="form1" enctype="multipart/form-data" id=form1 onSubmit="return validateForm();">
<td width=750 valign="top">
	<table>		
		<tr>
		 <th>
		 Name of Former Employer
		 </th>
		 
		 <th>
		 Duration Of Employment
		 </th>
		 
		 <th>
		 Reason for Leaving Employment
		 </th>
		 
		 <th>
		 Recorded Incidents or Accidents
		 </th>
		</tr>
		
		<tr>
			<td>
			<input class="text"  id="nfe1" name="nfe1" value="">  
		  </td>
		  <td>
			<input class="text"  id="de1" name="de1" value="">  
		  </td>
		  <td>
			<input class="text"  id="rle1" name="rle1" value="">  
		  </td>
		  <td>
			<input class="text"  id="ria1" name="ria1" value="">  
		  </td>
		</tr>
				
		
		
		<tr>
			<td>	
							  <input class="buttons" type="Submit" name="<?php echo $submitTag?>" value="<?php echo $submitTag?>">
			</td>
			<td>
			  <input class="buttons" type="Reset" name="Reset" value="Reset" onclick="location.href='addEmployement.php'">			  
			</td>
		</tr>						
	</table>
</td>
</form>
</tr>
</table>

[diafol]

I'd have a new table row with a button input between the data row and the submit/reset row.
You then have a js script add a duplicate row below the last data row on button click. You'll need to make the name attributes of the inputs into arrays:

<input class="text"  id="ria1" name="ria[0]" value="" />

then next row should have:

<input class="text"  id="ria2" name="ria[1]" value="" />

Do the same for the others. ID attributes have to be unique.

Your $_POST variable will then be like this:

$ria_array = (array) $_POST['ria'];

Do this for all fields

you loop through all the rows and create a SQL VALUES clause from them, which you implode:

$i = 0; $val = "";
while($i < count($ria_array){
 //clean your variables here with mysql_real_escape_string()
 $val .= "('{$nfe_array[$i]}','{$de_array[$i]}','{$rie_array[$i]}','{$ria_array[$i]}')";
}
$val_sql = implode(",",$val);
$r = mysql_query("INSERT INTO table (field12,field2,field3,field4) VALUES $val_sql");

The js code for adding a row can probably be found on the jQuery site. There'll be loads of examples peppered all over the web.

[newbie14]

Dear Ardav,
I found this site looks ok http://viralpatel.net/blogs/2009/03/dynamically-add-remove-rows-in-html-table-using-javascript.html. Do you think this will be ok or jquery will be better. Thank you.

[diafol]

I don't think it matters very much which one you use. The plain js is a pretty trivial solution. WHy do they insist on using rubbish HTML?

jQuery is a complete framework, but is quite small. This can be very useful if you intend to include some interactivity to your site.

I'd just caution you on adding AND deleting rows - if you use an incrementer for assigning an id or an array position to a name - they could be totally changed by deleting and then adding again. Delete buttons: do you have hust one and delete the last addition or have a delete button for each row?

ANyway, just keep an eye on the underlying html that js pumps out as you add (or delete) rows. Chrome has the Inspect Element thingy. Other browsers have similar functionality.

[newbie14]

Dear Ardav,
So let me go and search for jquery samples then will be better since that is safest then. Actually what is different between jquery,ajax and javascript? I found this one link http://snipplr.com/view.php?codeview&id=13326. I dont know how to apply it. Must I include a jquery library is it?

[diafol]

OK, differences bwteeen js /ajax / jquery:

javascript is a well-supported client-side language which allows interactive functionality once the html has loaded.
jQuery is a javascript library/framework that simplifies the usage of javascript.
Javascript is implemented differently depending on the actual browser, so jQuery ensures that your code runs in alla browsers.
Ajax is a technique more than anything. For most people,ajax pretty much means get data from the server and display it in the page (without page reload). This usually consists of a js script which calls a server-side script (php, asp etc), which passesx info back to it so that the js script can update parts of the page.

[newbie14]

Dear Ardav,
Thank you for the informative explantion. Any idea how to run the sample link I posted earlier?

[diafol]

If you look at the original site:

http://jquery-howto.blogspot.com/2009/02/add-table-row-using-jquery-and.html

The first comment in the comments section shows a very succinct way of adding a row. Have a look at that. To get jQuery to work, place:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

In the head area of your page.

[newbie14]

Dear Ardav,
I have got this code for the dynamic row. I dont understand what is the importance of this part of the code prot.attr("class", ""). Why when I remove it does not work? Another thing how to link validation to one of the box to enable only decimal values.

<html>
	<head>
		<script src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
		<script>
		$(document).ready(function() {
			var id = 0;
			
			// Add button functionality
			$("table.dynatable button.add").click(function() {
				id++;
				var master = $(this).parents("table.dynatable");
				
				// Get a new row based on the prototype row
				var prot = master.find(".prototype").clone();
				prot.attr("class", "")
				prot.find(".id").attr("value", id);
				
				master.find("tbody").append(prot);
			});
			
			// Remove button functionality
			$("table.dynatable button.remove").live("click", function() {
				$(this).parents("tr").remove();
				
			});
		});
		</script>
		<style>
			.dynatable {
				border: solid 1px #000; 
				border-collapse: collapse;
			}
			.dynatable th,
			.dynatable td {
				border: solid 1px #000; 
				padding: 2px 10px;
				width: 170px;
				text-align: center;
			}
			.dynatable .prototype {
				display:none;
			}
		</style>
	</head>
	<body>
		<form action="<?=$_SERVER['PHP_SELF']?>" method="post" name="form1" enctype="multipart/form-data" id=form1 >
		<table class="dynatable">
			<thead>
				<tr>
					<th>ID</th>
					<th>Name</th>
					<th>Col 3</th>
					<th>Col 4</th>
					<th><button class="add">Add</button></th>
				</tr>
			</thead>
			<tbody>
				<tr class="prototype">
					<td><input type="text" name="id[]" value="0" class="id" /></td>
					<td><input type="text" name="name[]" value="" /></td>
					<td><input type="text" name="col4[]" value="" /></td>
					<td><input type="text" name="col3[]" value="" /></td>
					<td><button class="remove">Remove</button>
				</tr>
		</table>
		<input class="buttons" type="Submit" name="Submit" value="Submit">
	</form>
	</body>
</html>

[diafol]

OK, this is getting too js for the php forum. Ask your js questions there. Anyway,

prot.attr("class", "")

THis sets the class attribute of 'prot' to nothing. This is a common way of changing the appearance of an element via CSS or to take it out of a chain.

Seriously, ask in the js forum.