Add More Data Dynamically

PHP programming forum. Ask questions or help people concerning PHP code. Don't understand a function? Need help implementing a class? Don't understand a class? Here is where to ask. Remember to do your homework!

Moderator: General Moderators

Post Reply
Cronikeys
Forum Commoner
Posts: 35
Joined: Sun Jan 16, 2005 9:14 am

Add More Data Dynamically

Post by Cronikeys »

I am looking for a script to add up to a certain number of contractors on a php based system.

I want it to be like this:

You fill in all the data then click add more contractors as seen here:
http://www.icdcommercial.com/database/contractor1.jpg

Then once you do that it looks like this:
http://www.icdcommercial.com/database/contractor2.jpg

------------------------------------------------

Is this possible? It probably has to be done with some javascript I would imagine, or a clever use of forms.
Any ideas?

EDIT:

Here is some more info, I am going to have the contractor data go into the mysql as this: "
contractor1,contact1,pricing1;
contractor2,contact2,pricing2;
contractor3,contact3,pricing3;
contractor4,contact4,pricing4;
contractor5,contact5,pricing5;
contractor6,contact6,pricing6;

And it outputs like this:
http://www.icdcommercial.com/database/array.php


And here is the code for that:

Code: Select all

<?
session_start();
include("config.inc.php");
include("templates/".$template."/".$template.".cfg");
$title = $sitename . " .:. Index";
include("templates/".$template."/overall_header.tpl");
mysql_connect(localhost,$username,$password);
@mysql_select_db($database) or die( "Unable to select database");
$query="SELECT * FROM  contractor";
$result=mysql_query($query);
$conttemp=mysql_result($result,0,"contractor");
$conrow = explode(";",$conttemp);
$numrows=count($conrow)-1;
$i=0;
echo "<table border width=90%><tr><td>Contractor</td><td>Contact</td><td>Pricing</td></tr>";
while($i<$numrows)&#123;
	echo "<tr>";
$concol = explode(",",$conrow&#1111;$i]);
echo "<td>".$concol&#1111;0]."</td><td>".$concol&#1111;1]."</td><td>".$concol&#1111;2]."</td>";
	echo "</tr>";
$i++;
&#125;
echo "</table>";
include("templates/".$template."/overall_footer.tpl");
?>
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

your example images above point to Javascript adding additional fields to enter. Likely, you'll need to use the innerHTML property to create the "new" contents.

I'd suggest naming all the fields with array markings, such as:

Code: Select all

<input name="name&#1111;]" />
<input name="pricing&#1111;]" />
This provides an easy to access set of arrays once submitted:

Code: Select all

print_r($_POST&#1111;'name']);
print_r($_POST&#1111;'pricing']);
Cronikeys
Forum Commoner
Posts: 35
Joined: Sun Jan 16, 2005 9:14 am

Post by Cronikeys »

Well my problem really isn't INserting the data. It is how to get the user to type it in. I want that "Add More Contractors" link to dynamically add another <tr> of places to insert contractor information. Thanks for your reply though!

Any thoughts?
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

as I said, Javascript, using the innerHTML property.
Cronikeys
Forum Commoner
Posts: 35
Joined: Sun Jan 16, 2005 9:14 am

Post by Cronikeys »

Oh, sorry! Having never heard of innerHTML, I thought your last reply was about inserting data XD

I will do some google searching and post with my success or more problems!

Thanks

Edit:

Ok, I found something called "W3C DOM" that will do what I want, but I found it in a google search for innerHTML, so thank you!

http://www.quirksmode.org/dom/domform.html <-- for those interested
Last edited by Cronikeys on Sun Jan 16, 2005 10:18 am, edited 1 time in total.
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

Code: Select all

<html>
	<head>
		<title>feyd's example of Javascript adding rows (with form fields)</title>
		<script language="Javascript"><!--

			var count = 1;

			function addNewRow()
			&#123;
				var obj = document.getElementById ? document.getElementById( 'frmTbl' ) : document.all&#1111; 'frmTbl' ];

				if( !obj )
				&#123;
					return;
				&#125;

				count++;
				obj.innerHTML += '\t\t\t<tr><td>Contractor ' + count + ':<br /><input type="text" name="names&#1111;]" /></td>\n\t\t\t<td>Price:<br /><input type="text" name="prices&#1111;]" /></td>\n\t\t\t<td>Something else:<br /><input type="text" name="something_else&#1111;]" /></td></tr>'
			&#125;

		//--></script>
	</head>
	<body>
		<form action="your_processor.php">
		<table id="frmTbl">
			<tr><td>Contractor 1:<br /><input type="text" name="names&#1111;]" /></td>
			<td>Price:<br /><input type="text" name="prices&#1111;]" /></td>
			<td>Something else:<br /><input type="text" name="something_else&#1111;]" /></td></tr>
		</table><input type="submit" /></form>
		<a href="javascript:addNewRow()">Add another row</a>
	</body>
</html>
note: this isn't exactly kosher XHTML, but for this example, it works as a proof of concept.
Cronikeys
Forum Commoner
Posts: 35
Joined: Sun Jan 16, 2005 9:14 am

Post by Cronikeys »

Wow! Thank you! I saw that code and immediately started implementing it :D

There are three problems though:


1. It use to only submit the first one, this was fixed by a simple movement of the </form> ;)

2. It clears the other <input>'s every time you click add another row. This one I can't fix :(

3. It does not work in IE, only firefox. This one I can't fix :(

Any ideas?

Also, for the people who read this topic later and want my code for the "form_proccessor.php" it is this:

Code: Select all

<?
$numrows=count($contractor); 
echo $numrows;
echo "<table>";
$i=0;
while($i<$numrows)&#123;
   echo "<tr>";
echo "<td>".$contractor&#1111;$i]."</td><td>".$contact&#1111;$i]."</td><td>".$pricing&#1111;$i]."</td>";
   echo "</tr>";
$i++;
&#125;
echo "</table>"; 
?>

Click here to see what I have done in action:

http://www.icdcommercial.com/database/test.html

Compliments to feyd for 90% of the code :)
Cronikeys
Forum Commoner
Posts: 35
Joined: Sun Jan 16, 2005 9:14 am

Post by Cronikeys »

w00t w00t :D I r0x0r at debugging :P

I just fixed all the errors :D

It isn't XHTML complient (or nerd complient probably), but what they hey, it works :)

here it is:

Code: Select all

<html>
   <head>
      <title>feyd's example of Javascript adding rows (with form fields)</title>
      <script language="Javascript"><!--

         var count = 1;

         function addNewRow()
         &#123;
            var obj = document.getElementById ? document.getElementById( 'form' ) : document.all&#1111; 'form' ];

            if( !obj )
            &#123;
               return;
            &#125;

            count++;
            obj.innerHTML+='<table><tr><td>Contractor ' + count + ':<br><input type="text" name="contractor&#1111;]"></td><td>Contact:<br><input type="text" name="contact&#1111;]"></td><td>Pricing:<br><input type="text" name="pricing&#1111;]"></td></tr></table>';
         &#125;

      //--></script>
   </head>
   <body>
      <form action="test.php">
<span id="form">
      <table>
         <tr><td>Contractor 1:<br /><input type="text" name="contractor&#1111;]"></td>
         <td>Contact:<br /><input type="text" name="contact&#1111;]"></td>
         <td>Pricing:<br /><input type="text" name="pricing&#1111;]"></td></tr>
      </table>
</span>
<input type="submit" />
     <a href="javascript:addNewRow()">Add another row</a>
</form>
   </body>
</html>

It works in IE and it leaves the information in the previous fields filled in :D
Post Reply