Entonces, tengo el siguiente código en HTML, mi objetivo es convertir la ubicación a Geocode (lat&long).
<html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> <script> $.ajax({ url: 'http://api.positionstack.com/v1/forward', data: { access_key: 'my private key', query: 'Thisshouldbeupdated(is my location eg Transilvania,Romania)', limit: 1 } }).done(function(data) { console.log(JSON.parse(data)); }); </script> <script> var query = ""; function update() { // find the input element by ID and assign its value to `myVarToUpdate` query = document.getElementById("").value; } </script> </head> <body> <form> <input id="query" value="" /> <button type="button" onclick="update()">Update</button> </form> </body> </html>Entonces, después de presionar actualizar (o enviar) para actualizar la var y actualizar y obtener los datos de la API de PositionStack.
Muchas gracias
Primero proporcione a su formulario una forma de identificarlo. Agregue una id o class para seleccionar el formulario. Elimine el detector de eventos onclick y cambie el tipo de botón para submit .
<form id="query-form"> <input id="query" value="" /> <button type="submit">Update</button> </form> Deberá poder llamar a la solicitud $.ajax cada vez que envíe su formulario. La forma más sencilla de hacer esto es envolver la solicitud AJAX en una function . Llamemos a esta función getPosition . Dale a la función un solo parámetro llamado query . Este parámetro es la cadena que enviaremos al servidor cuando llamemos a la función getPosition .
function getPosition(query) { $.ajax({ url: 'http://api.positionstack.com/v1/forward', data: { access_key: 'my private key', query: query, limit: 1 } }).done(function(data) { console.log(JSON.parse(data)); }); } Ahora conecte el formulario y la función getPosition .
Seleccione el formulario y la consulta input . Escuche el evento de submit en el elemento de formulario. Este evento se activa cada vez que presiona un botón de envío dentro de un elemento <form> .
Mientras envía, obtenga el valor de la entrada de la consulta. Luego llame a la función getPosition mientras pasa el valor de la query .
const $form = $('#query-form'); const $query = $('#query'); $form.on('submit', event => { event.preventDefault(); // Don't submit, but do our custom behavior. const query = $query.val(); getPosition(query); });