s2mambau

how to pass value from info window into texfield

Discussion created by s2mambau on Jun 11, 2012
Latest reply on Jun 12, 2012 by s2mambau
hi,
can someone help me, i just want to get value from infowindow .for example from code below i just want  input id="name" and input id="address" get value from infowindow when i click the layer


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html debug=true>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Query Task - Stylize Feature Set with InfoWindow Tabs (Polygon)</title>

    <script src="http://maps.google.com/maps?file=api&v=2&key=DioG219lPJG3WTn3zmQqebsjVg" type="text/javascript"></script>
    <script src="http://serverapi.arcgisonline.com/jsapi/gmaps/?v=1.6" type="text/javascript" ></script>

    <script type="text/javascript">

      var gmap = null;
      var qtask = null;
      var query = null;
      var mapExtension = null;
      var gOverlays = null;

      function initialize() {
        // GMap construction
        gmap = new GMap2(document.getElementById('gmap'));
        gmap.addMapType(G_NORMAL_MAP);
        gmap.addMapType(G_SATELLITE_MAP);
        gmap.addControl(new GLargeMapControl());
        gmap.addControl(new GMapTypeControl());
        gmap.setCenter(new GLatLng(33.97142760360439, -117.3805046081543), 17); // RIVERSIDE (Polyline, Polygon)
        gmap.enableScrollWheelZoom();

        //Create MapExtension utility class
        mapExtension = new esri.arcgis.gmaps.MapExtension(gmap);

        // Query Task
        qtask = new esri.arcgis.gmaps.QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/1");
        GEvent.addListener(qtask, "executecomplete", function() {
          //console.debug("'query task complete' event fired!!!");
        });

        // Query
        query = new esri.arcgis.gmaps.Query();

      }

      function executeQuery() {
        var cent = gmap.getCenter();
        var bounds = gmap.getBounds();

        // clear gOverlays overlays and event listeners
        mapExtension.removeFromMap(gOverlays);

        // set query parameters
        query.queryGeometry = bounds;
        query.returnGeometry = true;
        query.outFields = ["POP2000","POP2007"];
        // execute query task
        qtask.execute(query, false, mycallback);

      }

      function mycallback(fset) {
        //JS literal class esri.arcgis.gmaps.OverlayOptions
        var overlayOptions = {strokeColor:"#FF0000",strokeWeight:1,strokeOpacity:0.75,fillColor:"#000066",fillOpacity:0.2};
 
        //JS literal class esri.arcgis.gmaps.InfoWindowOptions with tabs
        var infoWindowOptionsTabs =
  {
        content:      "<table>" +
                         "<tr><td>Name:</td> <td><input id ='name' value='{POP2000}'/> </td> </tr>" +
                         "<tr><td>Address:</td> <td><input type='text' id='address' value='{POP2007}'/></td> </tr>"
        };
        gOverlays = mapExtension.addToMap(fset,overlayOptions,infoWindowOptionsTabs);
      }
  

    </script>

  </head>

  <body onload="initialize();" onunload="GUnload();">
  <table width="100%" height="100%">
    <tr>
      <td align="center">

        <table>
          <tr align="left">
            <td>
              <input type="button" value="Execute Query" onclick="executeQuery();" /> 

              <input type="button" value="Clear Map Overlays" onclick="mapExtension.removeFromMap(gOverlays);" />
            </td>
          </tr>

          <tr align="left" valign="top">
            <td>
              <div id="gmap" style="width: 450px; height:450px;"></div>
            </td>
          </tr>
        </table>

      </td>
    </tr>
  </table>
    <p>
      name<input id="name"/>address<input id="address"/>
    </p>
  </body>
</html>

Outcomes