加载MySQL数据到表单 [英] Load mySQL Data Into Form

查看：119 发布时间：2015/11/30 1:31:36 php ajax google-maps-api-3

本文介绍了加载MySQL数据到表单的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我使用PHP和AJAX以下编码来填充显示存储在MySQL数据库中的一个给定的位置，各种标记的地图。

这些标记显示正确，但我希望能够做的是填充字段上我的形式从数据库中的相关数据，以便为每个点击标记字段将显示数据pertient到标记。

PHP code

 ＆LT;
？PHP
要求（phpfile.php）;

//开始XML文件，创建父节点

$ DOM =新的DOM文档（1.0）;
$节点= $ dom-＆GT;的createElement（标记）;
$ parnode = $ dom-＆GT;的appendChild（$节点）;

//打开一个到MySQL服务器的连接

$连接=的mysql_connect（主机名，$用户名，密码$）
如果（！$连接）{死（未连接：mysql_error（））;}

//设置活动的MySQL数据库

$ db_selected = mysql_select_db（$数据库，$连接）;
如果（！$ db_selected）{
死亡（可以\'吨使用DB：mysql_error（））;
}

//选择在标记表中的所有行

$查询=选择findid，locationid，findosgb36lat，findosgb36lon，dateoftrip，findcategory，findname，finddescription，pasref，findimage，additionalcomments从发现其中`locationid` ='2';

$结果= mysql_query（$查询）;
如果（！$结果）{
模具（无效的问题：mysql_error（））;
}

标题（内容类型：文本/ XML）;

//遍历行，添加XML节点的每个

而（$行= @mysql_fetch_assoc（$结果））{
//增加来XML文档节点
$节点= $ dom-＆GT;的createElement（标记）;
$ newnode = $ parnode-＆GT;的appendChild（$节点）;
$ newnode-＆GT;的setAttribute（findid，$行['findid']）;
$ newnode-＆GT;的setAttribute（locationid，$行['locationid']）;
$ newnode-＆GT;的setAttribute（findosgb36lat，$行['findosgb36lat']）;
$ newnode-＆GT;的setAttribute（findosgb36lon，$行['findosgb36lon']）;
$ newnode-＆GT;的setAttribute（dateoftrip，$行['dateoftrip']）;
$ newnode-＆GT;的setAttribute（findcategory，$行['findcategory']）;
$ newnode-＆GT;的setAttribute（findname，$行['findname']）;
$ newnode-＆GT;的setAttribute（finddescription，$行['finddescription']）;
$ newnode-＆GT;的setAttribute（pasref，$行['pasref']）;
$ newnode-＆GT;的setAttribute（findimage，$行['findimage']）;
$ newnode-＆GT;的setAttribute（additionalcomments，$行['additionalcomments']）;

}

回声$ dom-＆GT; saveXML（）;

？＆GT;

HTML code

 ＆LT;！DOCTYPE HTML PUBLIC -  // W3C // DTD XHTML 1.0 Strict标准// EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
＆LT; HTML的xmlns =http://www.w3.org/1999/xhtml郎=EN＆GT;
    ＆LT; HEAD＆GT;
        ＆LT; META HTTP-当量=Content-Type的CONTENT =text / html的;字符集= UTF-8/＆GT;
        ＆LT;冠军＆GT;查找每位置和LT; /标题＆GT;
        ＆LT;链接相对=样式表的href =CSS / findsperlocationstyle.css类型=文本/ CSS媒体=所有/＆GT;
        ＆LT;脚本类型=文/ JavaScript的SRC =http://maps.google.com/maps/api/js?sensor=false&language=en＆GT;＆LT; / SCRIPT＆GT;
        ＆LT;脚本类型=文/ JavaScript的＆GT;
            VAR customIcons = {
            人工制品：{
            图标：http://labs.google.com/ridefinder/images/mm_20_red.png，
            影子：http://labs.google.com/ridefinder/images/mm_20_shadow.png
            }，
            硬币： {
            图标：http://labs.google.com/ridefinder/images/mm_20_green.png，
            影子：http://labs.google.com/ridefinder/images/mm_20_shadow.png
            }，
            首饰： {
            图标：http://labs.google.com/ridefinder/images/mm_20_yellow.png，
            影子：http://labs.google.com/ridefinder/images/mm_20_shadow.png
            }
            };

            //创建的LatLngBounds对象
            VAR边界=新google.maps.LatLngBounds（）;

            功能负载（）{
            VAR地图=新google.maps.Map（的document.getElementById（图），{
            中心：新google.maps.LatLng（54.312195845815246，-4.45948481875007）
            变焦：14，
            mapTypeId：卫星
            }）;

            //改变这取决于你的PHP文件的名称
            downloadUrl（phpfile.php功能（数据）{
            VAR XML = data.responseXML;
            VAR的标记= xml.documentElement.getElementsByTagName（标记）;
            VAR边界=新google.maps.LatLngBounds（）;
            对于（VAR I = 0; I＆LT; markers.length;我++）{
            变种findid =标记物[Ⅰ] .getAttribute（findid）;
            变种locationid =标记物[Ⅰ] .getAttribute（locationid）;
            变种dateoftrip =标记物[Ⅰ] .getAttribute（dateoftrip）;
            变种findcategory =标记物[Ⅰ] .getAttribute（findcategory）;
            变种findname =标记物[Ⅰ] .getAttribute（findname）;
            变种finddescription =标记物[Ⅰ] .getAttribute（finddescription）;
            变种pasref =标记物[Ⅰ] .getAttribute（pasref）;
            变种findimage =标记物[Ⅰ] .getAttribute（findimage）;
            变种additionalcomments =标记物[Ⅰ] .getAttribute（additionalcomments）;
            VAR点=新google.maps.LatLng（
            parseFloat（标记物[I] .getAttribute（findosgb36lat）），
            parseFloat（标记物[I] .getAttribute（findosgb36lon）））;
            VAR图标= customIcons [findcategory] || {};
            VAR的标记=新google.maps.Marker（{
            地图：地图，
            位置：点，
            标题：点击查看详情，
            图标：icon.icon，
            影子：icon.shadow
            }）;
            bounds.extend（点）;
            map.fitBounds（边界）;
            }
            }）;
            }

            功能downloadUrl（URL，回调）{
            VAR请求= window.ActiveXObject？
            新的ActiveXObject（Microsoft.XMLHTTP）：
            新XMLHtt prequest;

            request.onreadystatechange =功能（）{
            如果（request.readyState == 4）{
            request.onreadystatechange = doNothing;
            回调（要求，request.status）;
            }
            };

            request.open（GET，URL，真正的）;
            request.send（空）;
            }

            功能doNothing（）{}

            ＆LT; / SCRIPT＆GT;
＆LT; /头＆GT;
            ＆LT;身体的onLoad =load（）的＆GT;
            ＆LT;表格名称=findsperlocationID =findsperlocation＆GT;
              ＆LT; p align =left＆GT;＆LT;标签＆gt;的位置ID＆LT; BR /＆GT;
              ＆LT; /标签＆gt;
              ＆所述; / P＆GT;
              ＆LT; DIV＆GT;
                ＆LT; DIV align =left＆GT;
                  ＆LT;输入名称=locationid类型=文本ID =locationid值=2只读=只读/＆GT;
                ＆LT; / DIV＆GT;
              ＆LT; / DIV＆GT;
              ＆LT; p align =left＆GT;＆LT;标签＆gt;旅行＆LT的日期; BR /＆GT;
              ＆LT; /标签＆gt;
              ＆所述; / P＆GT;
              ＆LT; DIV＆GT;
                ＆LT; DIV align =left＆GT;
                  ＆LT;输入名称=dateoftrip类型=文本ID =dateoftrip只读=只读/＆GT;
              ＆LT; / DIV＆GT;
              ＆LT; / DIV＆GT;
              ＆LT; p align =left＆GT;
                ＆LT;标签＆gt;＆LT; /标签＆gt;
                ＆LT;标签＆gt;查找分类和LT; /标签＆gt;
              ＆所述; / P＆GT;
              ＆LT; DIV＆GT;
                ＆LT; DIV align =left＆GT;
                  ＆LT;输入名称=findcategory类型=文本ID =findcategory大小=10只读=只读/＆GT;
              ＆LT; / DIV＆GT;
              ＆LT; / DIV＆GT;
              ＆LT; p align =left＆GT;
                ＆LT;标签＆gt;查找名称和LT; /标签＆gt;
              ＆所述; / P＆GT;
              ＆LT; DIV＆GT;
                ＆LT; DIV align =left＆GT;
                  ＆LT;输入名称=findname类型=文本ID =findname大小=35只读=只读/＆GT;
                ＆LT; / DIV＆GT;
              ＆LT; / DIV＆GT;
              ＆LT; p align =left＆GT;＆LT;标签＆gt;查找说明＆LT; /标签＆gt;＆安培; NBSP;＆LT; / P＆GT;
              ＆LT; DIV＆GT;
                ＆LT; DIV align =left＆GT;
                  ＆LT;输入名称=finddescription类型=文本ID =finddescription大小=100只读=只读/＆GT;
                ＆LT; / DIV＆GT;
              ＆LT; / DIV＆GT;
                ＆LT; p align =left＆GT;
                ＆LT;标签＆gt;
                ＆LT;标签＆gt; PAS参考。 ＆LT; /标签＆gt;
              ＆所述; / P＆GT;
              ＆LT; DIV＆GT;
                ＆LT; DIV align =left＆GT;
                  ＆LT;输入名称=pasref类型=文本ID =pasref只读=只读/＆GT;
                ＆LT; / DIV＆GT;
              ＆LT; / DIV＆GT;
              ＆LT; p align =left＆GT;＆LT;标签＆gt;其他意见＆LT; /标签＆gt;
              ＆所述; / P＆GT;
              ＆LT; DIV＆GT;
                ＆LT; DIV align =left＆GT;
                  ＆LT; textarea的名字=additionalcommentsCOLS =50行=12ID =additionalcomments只读=只读＆GT;＆LT; / textarea的＆GT;
                ＆LT; / DIV＆GT;
              ＆LT; / DIV＆GT;
              ＆LT; p align =left＆GT;＆LT; BR /＆GT;
                ＆LT; /标签＆gt;
              ＆所述; / P＆GT;
              ＆LT; DIV＆GT;
                ＆LT; DIV align =left＆GT;＆LT; / DIV＆GT;
              ＆LT; / DIV＆GT;
            ＆LT; /形式GT;
            ＆LT; DIV ID =地图＆GT;＆LT; / DIV＆GT;
            ＆LT; /身体GT;
＆LT; / HTML＆GT;

我觉得我中途有，因为我mangaing拉所有的从数据库中的信息。我可以看到这个的时候我在我的web浏览器上运行PHP脚本，但我只是不知道该怎么做下一步。

做什么，我需要怎么做？

修订code

 ＆LT;！DOCTYPE HTML PUBLIC -  // W3C // DTD XHTML 1.0 Strict标准// EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
＆LT; HTML的xmlns =http://www.w3.org/1999/xhtml郎=EN＆GT;
    ＆LT; HEAD＆GT;
        ＆LT; META HTTP-当量=Content-Type的CONTENT =text / html的;字符集= UTF-8/＆GT;
        ＆LT;冠军＆GT;查找每位置和LT; /标题＆GT;
        ＆LT;链接相对=样式表的href =CSS / findsperlocationstyle.css类型=文本/ CSS媒体=所有/＆GT;
        ＆LT;脚本类型=文/ JavaScript的SRC =http://maps.google.com/maps/api/js?sensor=false&language=en＆GT;＆LT; / SCRIPT＆GT;
        ＆LT;脚本类型=文/ JavaScript的＆GT;
            VAR customIcons = {
            人工制品：{
            图标：http://labs.google.com/ridefinder/images/mm_20_red.png，
            影子：http://labs.google.com/ridefinder/images/mm_20_shadow.png
            }，
            硬币： {
            图标：http://labs.google.com/ridefinder/images/mm_20_green.png，
            影子：http://labs.google.com/ridefinder/images/mm_20_shadow.png
            }，
            首饰： {
            图标：http://labs.google.com/ridefinder/images/mm_20_yellow.png，
            影子：http://labs.google.com/ridefinder/images/mm_20_shadow.png
            }
            };

            //创建的LatLngBounds对象
            VAR边界=新google.maps.LatLngBounds（）;

            功能负载（）{
            VAR地图=新google.maps.Map（的document.getElementById（图），{
            中心：新google.maps.LatLng（54.312195845815246，-4.45948481875007）
            变焦：14，
            mapTypeId：卫星
            }）;

            //改变这取决于你的PHP文件的名称
            downloadUrl（phpfile.php功能（数据）{
            VAR XML = data.responseXML;
            VAR的标记= xml.documentElement.getElementsByTagName（标记）;
            VAR边界=新google.maps.LatLngBounds（）;
            对于（VAR I = 0; I＆LT; markers.length;我++）{
            变种findid =标记物[Ⅰ] .getAttribute（findid）;
            变种locationid =标记物[Ⅰ] .getAttribute（locationid）;
            变种dateoftrip =标记物[Ⅰ] .getAttribute（dateoftrip）;
            变种findcategory =标记物[Ⅰ] .getAttribute（findcategory）;
            变种findname =标记物[Ⅰ] .getAttribute（findname）;
            变种finddescription =标记物[Ⅰ] .getAttribute（finddescription）;
            变种detectorname =标记物[Ⅰ] .getAttribute（detectorname）;
            变种searchheadname =标记物[Ⅰ] .getAttribute（searchheadname）;
            变种detectorsettings =标记物[Ⅰ] .getAttribute（detectorsettings）;
            变种pasref =标记物[Ⅰ] .getAttribute（pasref）;
            变种findimage =标记物[Ⅰ] .getAttribute（findimage）;
            变种additionalcomments =标记物[Ⅰ] .getAttribute（additionalcomments）;
            VAR点=新google.maps.LatLng（
            parseFloat（标记物[I] .getAttribute（findosgb36lat）），
            parseFloat（标记物[I] .getAttribute（findosgb36lon）））;
            VAR图标= customIcons [findcategory] || {};
            VAR的标记=新google.maps.Marker（{
            地图：地图，
            位置：点，
            标题：点击查看详情，
            图标：icon.icon，
            影子：icon.shadow，
            formdateoftrip：dateoftrip
            formfindcategory：findcategory
            }）;
            bounds.extend（点）;
            map.fitBounds（边界）;
            }
            google.maps.event.addListener（标记，咔嚓，函数（）{警报（关联的数据：+ this.formdateoftrip +，+ this.findcategory）;}）;
            }）;
            }


            功能downloadUrl（URL，回调）{
            VAR请求= window.ActiveXObject？
            新的ActiveXObject（Microsoft.XMLHTTP）：
            新XMLHtt prequest;

            request.onreadystatechange =功能（）{
            如果（request.readyState == 4）{
            request.onreadystatechange = doNothing;
            回调（要求，request.status）;
            }
            };

            request.open（GET，URL，真正的）;
            request.send（空）;
            }

            功能doNothing（）{}

            ＆LT; / SCRIPT＆GT;

＆LT; /头＆GT;
            ＆LT;身体的onLoad =load（）的＆GT;
            ＆LT;表格名称=findsperlocationID =findsperlocation＆GT;
              ＆LT; p align =left＆GT;＆LT;标签＆gt;的位置ID＆LT; BR /＆GT;
              ＆LT; /标签＆gt;
              ＆所述; / P＆GT;
              ＆LT; DIV＆GT;
                ＆LT; DIV align =left＆GT;
                  ＆LT;输入名称=locationid类型=文本ID =locationid值=2只读=只读/＆GT;
                ＆LT; / DIV＆GT;
              ＆LT; / DIV＆GT;
              ＆LT; p align =left＆GT;＆LT;标签＆gt;旅行＆LT的日期; BR /＆GT;
              ＆LT; /标签＆gt;
              ＆所述; / P＆GT;
              ＆LT; DIV＆GT;
                ＆LT; DIV align =left＆GT;
                  ＆LT;输入名称=dateoftrip类型=文本ID =dateoftrip只读=只读/＆GT;
              ＆LT; / DIV＆GT;
              ＆LT; / DIV＆GT;
              ＆LT; p align =left＆GT;
                ＆LT;标签＆gt;＆LT; /标签＆gt;
                ＆LT;标签＆gt;查找分类和LT; /标签＆gt;
              ＆所述; / P＆GT;
              ＆LT; DIV＆GT;
                ＆LT; DIV align =left＆GT;
                  ＆LT;输入名称=findcategory类型=文本ID =findcategory大小=10只读=只读/＆GT;
              ＆LT; / DIV＆GT;
              ＆LT; / DIV＆GT;

              ＆LT; /形式GT;
            ＆LT; DIV ID =地图＆GT;＆LT; / DIV＆GT;
            ＆LT; / SCRIPT＆GT;
            ＆LT; /身体GT;
＆LT; / HTML＆GT;

code段

  VAR指标=新google.maps.Marker（{
地图：地图，
位置：点，
标题：点击查看详情，
图标：icon.icon，
影子：icon.shadow，
formdateoftrip：dateoftrip
formfindcategory：findcategory
formfindname：findname
formfinddescription：finddescription
formpasref：pasref
formfindimage：findimage
formadditionalcomments：additionalcomments
}）;
bounds.extend（点）;
map.fitBounds（边界）;
}
google.maps.event.addListener（标记，咔嚓，函数（）{
。的document.getElementById（'dateoftrip'）值= this.formdateoftrip;
。的document.getElementById（'findcategory'）值= this.formfindcategory;
的document.getElementById（'findname）。值= this.formfindname
}）;

解决方案

您只需通过添加新的领域像这样保存在您的标记额外的数据：

  VAR指标=新google.maps.Marker（
{
  地图：地图，
  位置：点，
  标题：点击查看详情，
  图标：icon.icon，
  影子：icon.shadow，
  myVariable1：从XML的一些数据
  myVariable2：其他一些数据
}）;

然后，所有你需要做的就是注册onclick事件标记，并把它的数据到表单中。

  google.maps.event.addListener（标记，点击功能（）
{
  警报（关联的数据：+ this.myVariable1 +，+ myVariable2）;
}）;

//编辑：

显然，code以上只展示了如何从标记获取数据 - 这只是一个例子。从JavaScript把你的数据转换成形式是两个步骤。你必须做的第一件事就是给要通过id属性，以填补一个唯一的ID各个领域。你已经做到了。然后，所有你需要做以下的（上面的示例中，而不是警报（））onClick事件code放：

 的document.getElementById（'formdateoftrip'）值= this.formdateoftrip;
//重复其用于其他领域在这里

祝你好运;）

//另一个编辑：

我没有注意到你已经把google.maps.event.addListener在错误的地方。它的工作原理的原因只有一个标志，你已经把你的外for循环它创建标记。它在里面，之后的map.fitBounds（范围）;但在此之前}，所以移动一行了。

的第二个问题在于在传递中的数据标记。如果要引用变量，你不能把它们放在引号。您可以使用引号来写字符串。

替换：

  formdateoftrip：dateoftrip
formfindcategory：findcategory
...

进入：

  formdateoftrip：dateoftrip，
formfindcategory：findcategory，
//下面修复过的人

I am using the PHP and AJAX coding below to populate a map showing various markers for a given location stored in a mySQL database.

The markers are correctly shown but what I would like to be able to do is to populate the fields on my form with the associated data from the database, so that as each marker is clicked the fields will show the data pertient to that marker.

PHP Code

<
?php 
require("phpfile.php"); 

// Start XML file, create parent node 

$dom = new DOMDocument("1.0"); 
$node = $dom->createElement("markers"); 
$parnode = $dom->appendChild($node); 

// Opens a connection to a MySQL server 

$connection=mysql_connect ("hostname", $username, $password); 
if (!$connection) { die('Not connected : ' . mysql_error());} 

// Set the active MySQL database 

$db_selected = mysql_select_db($database, $connection); 
if (!$db_selected) { 
die ('Can\'t use db : ' . mysql_error()); 
} 

// Select all the rows in the markers table 

$query = "SELECT findid, locationid, findosgb36lat, findosgb36lon, dateoftrip, findcategory, findname, finddescription, pasref, findimage, additionalcomments FROM finds WHERE `locationid` = '2'"; 

$result = mysql_query($query); 
if (!$result) { 
die('Invalid query: ' . mysql_error()); 
} 

header("Content-type: text/xml"); 

// Iterate through the rows, adding XML nodes for each 

while ($row = @mysql_fetch_assoc($result)){ 
// ADD TO XML DOCUMENT NODE 
$node = $dom->createElement("marker"); 
$newnode = $parnode->appendChild($node); 
$newnode->setAttribute("findid",$row['findid']); 
$newnode->setAttribute("locationid",$row['locationid']); 
$newnode->setAttribute("findosgb36lat",$row['findosgb36lat']);
$newnode->setAttribute("findosgb36lon",$row['findosgb36lon']);
$newnode->setAttribute("dateoftrip",$row['dateoftrip']); 
$newnode->setAttribute("findcategory",$row['findcategory']); 
$newnode->setAttribute("findname",$row['findname']); 
$newnode->setAttribute("finddescription",$row['finddescription']); 
$newnode->setAttribute("pasref",$row['pasref']);
$newnode->setAttribute("findimage",$row['findimage']);
$newnode->setAttribute("additionalcomments",$row['additionalcomments']);

} 

echo $dom->saveXML(); 

?>

HTML Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Finds Per Location</title>
        <link rel="stylesheet" href="css/findsperlocationstyle.css" type="text/css" media="all" />
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=en"></script>
        <script type="text/javascript"> 
            var customIcons = {
            Artefact: {
            icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
            shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
            },
            Coin: {
            icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png',
            shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
            },
            Jewellery: {
            icon: 'http://labs.google.com/ridefinder/images/mm_20_yellow.png',
            shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
            }
            };

            // Creating a LatLngBounds object
            var bounds = new google.maps.LatLngBounds();

            function load() { 
            var map = new google.maps.Map(document.getElementById("map"), { 
            center: new google.maps.LatLng(54.312195845815246,-4.45948481875007), 
            zoom:14, 
            mapTypeId: 'satellite' 
            }); 

            // Change this depending on the name of your PHP file 
            downloadUrl("phpfile.php", function(data) { 
            var xml = data.responseXML; 
            var markers = xml.documentElement.getElementsByTagName("marker"); 
            var bounds = new google.maps.LatLngBounds();
            for (var i = 0; i < markers.length; i++) { 
            var findid = markers[i].getAttribute("findid");
            var locationid = markers[i].getAttribute("locationid"); 
            var dateoftrip = markers[i].getAttribute("dateoftrip");
            var findcategory = markers[i].getAttribute("findcategory");
            var findname = markers[i].getAttribute("findname");
            var finddescription = markers[i].getAttribute("finddescription");
            var pasref = markers[i].getAttribute("pasref");
            var findimage= markers[i].getAttribute("findimage");
            var additionalcomments= markers[i].getAttribute("additionalcomments");
            var point = new google.maps.LatLng( 
            parseFloat(markers[i].getAttribute("findosgb36lat")), 
            parseFloat(markers[i].getAttribute("findosgb36lon")));
            var icon = customIcons[findcategory] || {}; 
            var marker = new google.maps.Marker({          
            map: map, 
            position: point,
            title: 'Click to view details',
            icon: icon.icon,
            shadow: icon.shadow
            }); 
            bounds.extend(point);
            map.fitBounds(bounds);
            } 
            }); 
            } 

            function downloadUrl(url, callback) { 
            var request = window.ActiveXObject ? 
            new ActiveXObject('Microsoft.XMLHTTP') : 
            new XMLHttpRequest; 

            request.onreadystatechange = function() { 
            if (request.readyState == 4) { 
            request.onreadystatechange = doNothing; 
            callback(request, request.status); 
            } 
            }; 

            request.open('GET', url, true); 
            request.send(null); 
            } 

            function doNothing() {} 

            </script> 
</head> 
            <body onLoad="load()">
            <form name="findsperlocation" id="findsperlocation">
              <p align="left"><label>Location id<br />
              </label>
              </p>
              <div>
                <div align="left">
                  <input name="locationid" type="text" id="locationid" value="2" readonly="readonly"/>
                </div>
              </div>
              <p align="left"><label>Date of Trip<br />
              </label>
              </p>
              <div>
                <div align="left">
                  <input name="dateoftrip" type="text" id="dateoftrip" readonly="readonly"/>
              </div>
              </div>
              <p align="left">
                <label></label>
                <label>Find Category</label>
              </p>
              <div>
                <div align="left">
                  <input name="findcategory" type="text" id="findcategory" size="10"readonly="readonly"/>
              </div>
              </div>
              <p align="left">
                <label>Find Name</label>
              </p>
              <div>
                <div align="left">
                  <input name="findname" type="text" id="findname" size="35" readonly="readonly"/>
                </div>
              </div>
              <p align="left"><label>Find Description</label>&nbsp;</p>
              <div>
                <div align="left">
                  <input name="finddescription" type="text" id="finddescription" size="100"readonly="readonly"/>
                </div>
              </div>
                <p align="left">
                <label>
                <label>PAS Ref.  </label>
              </p>
              <div>
                <div align="left">
                  <input name="pasref" type="text" id="pasref" readonly="readonly"/>
                </div>
              </div>
              <p align="left"><label>Additional Comments</label>
              </p>
              <div>
                <div align="left">
                  <textarea name="additionalcomments" cols="50" rows="12" id="additionalcomments" readonly="readonly"></textarea>
                </div>
              </div>
              <p align="left"><br />  
                </label>
              </p>
              <div>
                <div align="left"></div>
              </div>
            </form>
            <div id="map"></div>
            </body> 
</html>

I think I'm half way there because I'm mangaing to pull all of the information from the database. I can see this when I run the php script in my web browser, but I'm just not sure what to do for the next step.

What do I need to do next?

UPDATED CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Finds Per Location</title>
        <link rel="stylesheet" href="css/findsperlocationstyle.css" type="text/css" media="all" />
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=en"></script>
        <script type="text/javascript"> 
            var customIcons = {
            Artefact: {
            icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
            shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
            },
            Coin: {
            icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png',
            shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
            },
            Jewellery: {
            icon: 'http://labs.google.com/ridefinder/images/mm_20_yellow.png',
            shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
            }
            };

            // Creating a LatLngBounds object
            var bounds = new google.maps.LatLngBounds();

            function load() { 
            var map = new google.maps.Map(document.getElementById("map"), { 
            center: new google.maps.LatLng(54.312195845815246,-4.45948481875007), 
            zoom:14, 
            mapTypeId: 'satellite' 
            }); 

            // Change this depending on the name of your PHP file 
            downloadUrl("phpfile.php", function(data) { 
            var xml = data.responseXML; 
            var markers = xml.documentElement.getElementsByTagName("marker"); 
            var bounds = new google.maps.LatLngBounds();
            for (var i = 0; i < markers.length; i++) { 
            var findid = markers[i].getAttribute("findid");
            var locationid = markers[i].getAttribute("locationid"); 
            var dateoftrip = markers[i].getAttribute("dateoftrip");
            var findcategory = markers[i].getAttribute("findcategory");
            var findname = markers[i].getAttribute("findname");
            var finddescription = markers[i].getAttribute("finddescription");
            var detectorname = markers[i].getAttribute("detectorname");
            var searchheadname = markers[i].getAttribute("searchheadname");
            var detectorsettings = markers[i].getAttribute("detectorsettings");
            var pasref = markers[i].getAttribute("pasref");
            var findimage= markers[i].getAttribute("findimage");
            var additionalcomments= markers[i].getAttribute("additionalcomments");
            var point = new google.maps.LatLng( 
            parseFloat(markers[i].getAttribute("findosgb36lat")), 
            parseFloat(markers[i].getAttribute("findosgb36lon")));
            var icon = customIcons[findcategory] || {}; 
            var marker = new google.maps.Marker({          
            map: map, 
            position: point,
            title: 'Click to view details',
            icon: icon.icon,
            shadow: icon.shadow,
            formdateoftrip: "dateoftrip",
            formfindcategory: "findcategory"
            }); 
            bounds.extend(point);
            map.fitBounds(bounds);
            } 
            google.maps.event.addListener(marker, "click", function() {   alert("Associated data: " + this.formdateoftrip + ", " + this.findcategory); }); 
            }); 
            } 


            function downloadUrl(url, callback) { 
            var request = window.ActiveXObject ? 
            new ActiveXObject('Microsoft.XMLHTTP') : 
            new XMLHttpRequest; 

            request.onreadystatechange = function() { 
            if (request.readyState == 4) { 
            request.onreadystatechange = doNothing; 
            callback(request, request.status); 
            } 
            }; 

            request.open('GET', url, true); 
            request.send(null); 
            } 

            function doNothing() {} 

            </script> 

</head> 
            <body onLoad="load()">
            <form name="findsperlocation" id="findsperlocation">
              <p align="left"><label>Location id<br />
              </label>
              </p>
              <div>
                <div align="left">
                  <input name="locationid" type="text" id="locationid" value="2" readonly="readonly"/>
                </div>
              </div>
              <p align="left"><label>Date of Trip<br />
              </label>
              </p>
              <div>
                <div align="left">
                  <input name="dateoftrip" type="text" id="dateoftrip" readonly="readonly"/>
              </div>
              </div>
              <p align="left">
                <label></label>
                <label>Find Category</label>
              </p>
              <div>
                <div align="left">
                  <input name="findcategory" type="text" id="findcategory" size="10"readonly="readonly"/>
              </div>
              </div>

              </form>
            <div id="map"></div>
            </script>
            </body> 
</html>

CODE SNIPPET

var marker = new google.maps.Marker({ 
map: map, 
position: point, 
title: 'Click to view details', 
icon: icon.icon, 
shadow: icon.shadow, 
formdateoftrip: "dateoftrip", 
formfindcategory: "findcategory",
formfindname: "findname",
formfinddescription: "finddescription",
formpasref: "pasref",
formfindimage: "findimage",
formadditionalcomments: "additionalcomments"
}); 
bounds.extend(point); 
map.fitBounds(bounds); 
} 
google.maps.event.addListener(marker, "click", function() {  
document.getElementById('dateoftrip').value = this.formdateoftrip;
document.getElementById('findcategory').value = this.formfindcategory; 
document.getElementById('findname').value = this.formfindname
});

解决方案

You can store additional data in your marker just by adding new fields like this:

var marker = new google.maps.Marker(
{          
  map : map, 
  position : point,
  title : 'Click to view details',
  icon : icon.icon,
  shadow : icon.shadow,
  myVariable1 : "some data from xml",
  myVariable2 : "some other data"
});

Then all you have to do is register onClick event for the marker and put it's data into the form.

google.maps.event.addListener(marker, "click", function()
{
  alert("Associated data: " + this.myVariable1 + ", " + myVariable2);
});

// Edit:

Obviously the code above only shows how to retrieve data from the marker - it was just an example. Putting your data from JavaScript into the form is a 2 step process. The first thing you have to do is to give every field you want to fill an unique id via "id" attribute. You've already done it. Then all you have to do is put following code in the onClick event (instead of alert() in the sample above):

document.getElementById('formdateoftrip').value = this.formdateoftrip;
// repeat it for other fields here

Good luck ;)

// Another edit:

I didn't notice you've put google.maps.event.addListener in wrong place. The reason it works for only one marker is you've put it outside your "for" loop which creates the markers. It has to be inside, right after the "map.fitBounds(bounds);" but before "}", so move it one line up.

The second problem lies in passing the data in the marker. If you want to reference variables, you can't put them in quotes. You use quotes to write strings.

Replace:

formdateoftrip: "dateoftrip", 
formfindcategory: "findcategory",
...

Into:

formdateoftrip: dateoftrip, 
formfindcategory: findcategory,
// fix the others below too

这篇关于加载MySQL数据到表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

加载MySQL数据到表单 [英] Load mySQL Data Into Form

问题描述

相关文章

PHP最新文章

热门教程

热门工具

登录关闭

加载MySQL数据到表单 [英] Load mySQL Data Into Form

问题描述

相关文章

PHP最新文章

热门教程

热门工具

登录 关闭

登录关闭