CODEWITHSUNDEEP
javascriptjquery
Steve
Steve

Reputation: 151

Send javascript popup results to form field

I have a form that captures your co-ordinates and send to server to get postcode and returns.

Upon clicking the get location, you get a popup field that I would prefer the result to go to a form field instead.

JAVASCRIPT

    function showLocation(position) {
 var latitude = position.coords.latitude;
 var longitude = position.coords.longitude;
  $.getJSON('http://www.uk-postcodes.com/latlng/' + position.coords.latitude + ',' + position.coords.longitude + '.json?callback=?', null, gotpostcode);
}

function errorHandler(err) {
  if(err.code == 1) {
    alert("Error: Access is denied!");
  }else if( err.code == 2) {
    alert("Error: Position is unavailable!");
  }
}


function gotpostcode(result)
{
  var postcode = result.postcode;
    $("#postcodegoeshere").val(postcode);
}

function getLocation(){

   if(navigator.geolocation){
      // timeout at 60000 milliseconds (60 seconds)
      var options = {timeout:60000};
      navigator.geolocation.getCurrentPosition(showLocation, 
                                               errorHandler,
                                               options);
   }else{
      alert("Sorry, browser does not support geolocation!");
   }
}

HTML

  <body>
<form>
     <input type="button" onclick="getLocation();"  
                             value="Get Location"/>

   </form>
   <div>
   <input id='postcodegoeshere' name='xxx' type='text' value='' />
</div>
</body>

Upvotes: 0

Views: 144

Answers (1)

user694844
user694844

Reputation: 1187

You have to use a jQuery selector. You can then put it in an element using .html(postcode) or inside an input (not a checkbox, radio, or button though) using .val(postcode)

function gotpostcode(result)
{
  var postcode = result.postcode;
  $('#postcodegoeshere').html(postcode);
}

Information about selectors http://api.jquery.com/category/selectors/ , I'm using the ID selector in this code.

Changing html in elements http://api.jquery.com/html/

Changing input values http://api.jquery.com/val/

Upvotes: 1

Related Questions