Jump to content

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

esscher

By esscher
in Javascript Help

Recommended Posts

esscher Newbie

esscher

Posted
Posted

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

phpQuestioner_v5.0 Newbie

phpQuestioner_v5.0

Posted
Posted

 

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 Newbie

esscher

Posted
  • Author
Posted

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', '', '', '', '', '')

Archived

This topic is now archived and is closed to further replies.

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.