Page 1 of 1

Add More Data Dynamically

Posted: Sun Jan 16, 2005 9:23 am
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");
?>

Posted: Sun Jan 16, 2005 9:40 am
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']);

Posted: Sun Jan 16, 2005 9:57 am
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?

Posted: Sun Jan 16, 2005 10:05 am
by feyd
as I said, Javascript, using the innerHTML property.

Posted: Sun Jan 16, 2005 10:09 am
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

Posted: Sun Jan 16, 2005 10:18 am
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.

Posted: Sun Jan 16, 2005 10:44 am
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 :)

Posted: Sun Jan 16, 2005 11:48 am
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