How do I populate a form from database and update database on one page.

esscher · February 22, 2008

Without going into great detail (which I can do if it turns out more info is needed), I would like to:

All on one page, using ajax:

1. In a text field, have the user enter a plant name to insert into a database

2. Have a form pop up with attributes for the plant (name, scientific name, related species)

3. Have the user fill this field out and submit it to a mysql database table.

So far I have part 1 and 2 working. However, I cannot figure out how to continue to part 3 without submitting the data and loading to the next page for confirmation of insertion.

Please look and see what I've accomplished so far at this link

I can provide further information and source if it is needed. Thanks

Esscher

esscher · February 22, 2008

Sorry, the link didn't work.. here is is... http://66.87.141.7/phytobase/p2/demo_add_plant.php

phpQuestioner_v5.0 · February 22, 2008

What you would need to do is create a php/mysql page that contains this form and when this page is queried; echo your variables from your database back to your form fields. Then set a ajax script up, that will send your user's plant query to your php/mysql page and have it to return the form (with the variables from your database; which were just queried by the ajax request) as responseText back to your original page. This is what I would do; good luck.

esscher · February 23, 2008

ok, so i'm a little confused by that, do you think you could explain that in terms of what i already have done with my app? in other words check out my link and explain where to go from what i've done so far?

here are the source files

demo_add_plant.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="showplantprofileform.js"></script>


<script language="javascript">
var url = "add_plant_profile_record.php?id="; 

       function handleHttpResponse() {   
        if (http.readyState == 4) {
              if(http.status==200) {
                  var results=http.responseText;
              document.getElementById('PlantInfoDiv').innerHTML = results;
              }
              }
        }
       
        function showPlantProfileForm() {     
            var sId = document.getElementById("Plant2Check").value;
            http.open("GET", url + escape(sId), true);
            http.onreadystatechange = handleHttpResponse;
            http.send(null);
        }
function getHTTPObject() {
  var xmlhttp;

  if(window.XMLHttpRequest){
    xmlhttp = new XMLHttpRequest();

  }
  else if (window.ActiveXObject){
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    if (!xmlhttp){
        xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
    }
   
}
  return xmlhttp;


}
var http = getHTTPObject();
</script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Phytobase Home</title>
</head>
<body bgcolor="white">

<form>
Add Plant Profile (type anything):<input id="Plant2Check" type="text" name="inputplant" value="">
<p><input type="button" value="Click 4 Plant Profile Form" onClick="showPlantProfileForm()" />

</form>
<div id="PlantInfoDiv"><b>Plant info will be listed here.</b></div>

</body>
</html>

add_plant_profile_record.php

<?php 

include ("privatedbconfig.php");
include ("dbconnection.php");


echo "You've requested to add " .$_GET['id'] .".<br>";

$result=mysql_query("select * from plants where common_name='$inputplant'");
$numrows=mysql_num_rows($result);
if ($numrows > 0) 
{
echo "Plant is already in database.  Cannot Insert";
?><a href="http://66.87.141.7/phytobase/p2/home.html">Click to Return Home</a><?php
}
else
{
?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<body>
<form id="add_plant_profile_record" name="add_plant_profile_record">

<table border="1" cellpadding="3" cellspacing="0">
<tr>
<td align="center" bgcolor="#FFCC00"><strong>Property</strong></td>
<td align="center" bgcolor="#FFCC00"><strong>What to Insert</strong></td>
<?php
?>

</tr>
<tr>
<td bgcolor="#FFFFCC"><?php echo "Common Name";  ?></td>
<td bgcolor="#FFFFCC"><input name="common_name" type="text" value="<?php echo $_GET['id'] ?>"</td>
</tr>
<tr>
<td bgcolor="#FFFFCC"><?php echo "Additional Names";  ?></td>
<td bgcolor="#ffffcc"><textarea  name="additional_names" value=""></textarea></td>
</tr>
<tr>
<td bgcolor="#FFFFCC"><?php echo "Genus";  ?></td>
<td bgcolor="#ffffcc"><input id="genus" name="genus" type="text" value="" /></td>
</tr>
<tr>
<td bgcolor="#FFFFCC"><?php echo "Species";  ?></td>
<td bgcolor="#ffffcc"><input name="species" type="text" value="" /></td>
</tr>
<tr>
<td bgcolor="#FFFFCC"><?php echo "Part Used";  ?></td>
<td bgcolor="#ffffcc"><input name="part_used" type="text" value=""/></td>
</tr>
<tr>
<td bgcolor="#FFFFCC"><?php echo "Warnings";  ?></td>
<td bgcolor="#ffffcc"><textarea id="main" name="warnings" value=""></textarea></td>
</tr>
<tr>
<td bgcolor="#FFFFCC"><?php echo "Picture";  ?></td>
<td bgcolor="#ffffcc"><textarea name="picture" value=""></textarea></td>
</tr>
<tr>
<td bgcolor="#FFFFCC"><?php echo "Effects";  ?></td>
<td bgcolor="#ffffcc"><textarea id="main" name="fx"></textarea></td>
</tr>
<tr>
<td bgcolor="#FFFFCC"><?php echo "Law";  ?></td>
<td bgcolor="#ffffcc"><input name="law" type="text" value=""/></td>
</tr>
<tr>
<td bgcolor="#FFFFCC"><?php echo "Native Land";  ?></td>
<td bgcolor="#ffffcc"><input name="native_land" type="text" value=""/></td>
</tr>
<tr>
<td bgcolor="#FFFFCC"><?php echo "Social Group";  ?></td>
<td bgcolor="#ffffcc"><input name="social_group" type="text" value=""/></td>
</tr>
<tr>
<td bgcolor="#FFFFCC"><?php echo "Additional Notes";  ?></td>
<td bgcolor="#ffffcc"><textarea name="notes" value=""></textarea></td>
</tr>
<tr>
<td bgcolor="#FFFFCC"><?php echo "References";  ?></td>
<td bgcolor="#ffffcc"><textarea name="ref"  value=""></textarea></td>
</tr>
</table>
<input type="button" name="submit_plant_profile" onClick="submit_plant_profile_data()" value="Add Info to DB" />
</form><p>
<div id="putItHere">This should change when the data has been inserted</div>
<br>

</body>
</html>

</body>
</html>
<?php
}
?>

mysql "plants" table

--
-- Table structure for table `plants`
--

CREATE TABLE `plants` (
  `id` smallint(6) NOT NULL auto_increment,
  `common_name` varchar(255) NOT NULL default '',
  `additional_names` varchar(2000) default NULL,
  `genus` varchar(255) default NULL,
  `species` varchar(255) default NULL,
  `warnings` varchar(2000) default NULL,
  `picture` varchar(255) default NULL,
  `fx` varchar(2000) default NULL,
  `law` varchar(1000) default NULL,
  `native_land` varchar(255) default NULL,
  `social_group` varchar(2000) default NULL,
  `notes` varchar(10000) default NULL,
  `ref` varchar(1000) default NULL,
  PRIMARY KEY  (`id`,`common_name`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=16 ;

--
-- Dumping data for table `plants`
--

INSERT INTO `plants` (`id`, `common_name`, `additional_names`, `genus`, `species`, `warnings`, `picture`, `fx`, `law`, `native_land`, `social_group`, `notes`, `ref`) VALUES
(1, 'kava kava', 'none', 'piper', '', '', '', 'sedative', '', '', '', '', '')

Sign In

How do I populate a form from database and update database on one page.

Recommended Posts

esscher

Link to comment

Share on other sites

esscher

Link to comment

Share on other sites

phpQuestioner_v5.0

Link to comment

Share on other sites

esscher

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information