• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 267
  • Last Modified:

Populate form fields from Java Function

Hi Experts

I have a java function which works out the lat and long values of a given post code.  The lat and long values are delivered via a pop up window onclick.

My question is that I would like to populate fields in a form instead of the alert window.  

Please see the code below as it is at the moment.
<!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">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Post Code</title>    
<link href="http://www.google.com/uds/css/gsearch.css" type="text/css" rel="stylesheet"/>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAyrANTwCwKkWCUv1AdWmzVBSFofItBOTeWQi2WXI8fgE8z4y7NxSw98_2FJhvT_p0hb951f4CdzA-Cw" type="text/javascript"></script>
<script src="http://www.google.com/uds/api?file=uds.js&v=1.0&key=ABQIAAAAOCOcA9wNmWrQp5Dt4RPYjhTeU8oaQOjaryhCn4eIaVPkd9KGLRTXKO3qfDLrabJWW8SmaFC9B5ruxw" type="text/javascript"></script>    
<script src="gmap.js" type="text/javascript"></script>

<input type="text" id="postcode" size="10" />


<input type="submit" value="Calc Long / Lat" onclick="javascript:
  usePointFromPostcode(document.getElementById('postcode').value,
    function (point) {
      alert('Latitude: ' + point.lat() + '\nLongitude: ' + point.lng());
      })" />
        





 
</head>  
<body>    
<div id="searchcontrol">
  <p>&nbsp;</p>
  <form name="form1" id="form1" method="post" action="">
    <table width="36%"  border="0" cellspacing="0">
      <tr>
        <td width="24%">Lat:</td>
        <td width="76%"><input type="text" name="Latitude" value="NEED LAT VALUE HERE"/></td>
      </tr>
      <tr>
        <td>Long:</td>
        <td><input type="text" name="Longitude" value= "NEED LAT VALUE HERE"/></td>
      </tr>
    </table>
  </form>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
</div>  </body></html>
0
grantballantyne
Asked:
grantballantyne
  • 3
1 Solution
 
Michel PlungjanIT ExpertCommented:
1. JavaScript is not JAVA
2. change
alert('Latitude: ' + point.lat() + '\nLongitude: ' + point.lng());
to
document.form1.Latitude.value=point.lat();
document.form1.Longitude.value=point.lng();
0
 
Michel PlungjanIT ExpertCommented:
So change

<input type="submit" value="Calc Long / Lat" onclick="javascript:
  usePointFromPostcode(document.getElementById('postcode').value,
    function (point) {
      alert('Latitude: ' + point.lat() + '\nLongitude: ' + point.lng());
      })" />
       
to

<input type="button" value="Calc Long / Lat"
onclick="usePointFromPostcode(document.getElementById('postcode').value,
    function (point) {
      document.form1.Latitude.value=point.lat();
      document.form1.Longitude.value=point.lng();
      })" />
       
0
 
Michel PlungjanIT ExpertCommented:
But do not have input fields in the head

and use onSubmit instead of onClick of a submit button:

<!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">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Post Code</title>    
<link href="http://www.google.com/uds/css/gsearch.css" type="text/css" rel="stylesheet"/>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAyrANTwCwKkWCUv1AdWmzVBSFofItBOTeWQi2WXI8fgE8z4y7NxSw98_2FJhvT_p0hb951f4CdzA-Cw" type="text/javascript"></script>
<script src="http://www.google.com/uds/api?file=uds.js&v=1.0&key=ABQIAAAAOCOcA9wNmWrQp5Dt4RPYjhTeU8oaQOjaryhCn4eIaVPkd9KGLRTXKO3qfDLrabJWW8SmaFC9B5ruxw" type="text/javascript"></script>    
<script src="gmap.js" type="text/javascript"></script>
</head>  
<body>    
<div id="searchcontrol">
  <p>&nbsp;</p>
  <form name="form1" onSubmit="usePointFromPostcode(document.getElementById('postcode').value,
    function (point) {
      document.form1.Latitude.value=point.lat();
      document.form1.Longitude.value=point.lng();
      }); return false">
    <table width="36%"  border="0" cellspacing="0">
      <tr>
        <td width="24%">Postcode:</td>
        <td width="76%"><input type="text" id="postcode" size="10" /></td>
      </tr>
      <tr><td>&nbsp;</td>
        <td >
        <input type="submit" value="Calc Long / Lat" />
        </td>
      </tr>
      <tr>
        <td width="24%">Lat:</td>
        <td width="76%"><input type="text" name="Latitude" value="NEED LAT VALUE HERE"/></td>
      </tr>
      <tr>
        <td>Long:</td>
        <td><input type="text" name="Longitude" value= "NEED LAT VALUE HERE"/></td>
      </tr>
    </table>
  </form>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
</div>  </body></html>





       


0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now