I am learning to use Google Geolocation API. I have got my key and I am just trying to make a simple form which takes the city name and returns me the latitude and longitude using Geolocation API.
The simple form is :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form>
<fieldset>
<ul>
<li>
<label for="city-search">City Name</label>
<input type="text" id="city-search" placeholder="e.g. Rochester, NY">
</li>
</ul>
</fieldset>
<input type="button" id="sub" value="Submit" onclick="geolocation()">
</form>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src="geolocation.js"></script>
</body>
</html>
Can anyone tell me how to use the Geolocation API in a way that I can retrieve the latitude and longitude of the entered city.
Daily limit without API Key is 2500. You can read my question - Where to place API key for Google Geocoding API?
If you just use Geocoding on client browser, you do not need Google API Key. You can still pass the key if your client is a heavy user and you want to pay on behalf of your client.
Here is the working demo - https://jsfiddle.net/uj5qcqx0/
$(function() {
$('#sub').click(function() {
var city = $('#city-search').val();
if (city.length) {
var url = "https://maps.googleapis.com/maps/api/geocode/json?sensor=false&address=" + city;
$.get(url, function(data) {
$("#result").text(JSON.stringify(data));
});
} else {
alert("Please enter city.");
}
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="city-search">City Name</label>
<input type="text" id="city-search" placeholder="e.g. Rochester, NY">
<input type="button" id="sub" value="Submit">
<div id="result"></div>
Related
I must admit to being clueless on Java. Having spent from 1976 to retirement working on IBM kit. I have never used it. However I do enjoy writing PHP for a website. But integrating reCaptcha is driving me insane. (I have changed the site keys in the example below) I have reduced the code to a minimum in an attempt to get this to work but ironically including a duff line of code elicits a response. In the following having removed all the PHP code, I accidentally left the echo in! and that produced the following echo in LDA108.php.
'108 Name: John Watt Email: watt#foddl.org.uk
Phone: 0121 644 5167 Message: Please please send the forms
Please check the captcha form.'
And yes that is me begging. Clearly I am missing something. Can onyone please put me out of my misery?
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="robots" content="noindex, nofollow" />
<head>
<title>Display League Contact Details</title>
<!-- External Style sheets -->
<link rel="stylesheet" type="text/css" media="screen, print, handheld" href="LDA.css" />
<style type="text/css">
textarea {
font-size: 10pt;
font-family: Arial;
}
</style>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://www.google.com/recaptcha/api.js?render='6LdW3V8hLPANABXKYnPSjhyF6nG4SrbRYbGlBdMPt'"></script>
</head>
<body id="LDA107C">
<fieldset id="contactform1">
<legend id="legend">To Contact us Please enter the following :</legend>
<form id="subform" name="subform" method="post" action="LDA108.php">
<p><label for="name" class="label1">Your Name</label>
<input type="text" name="name" id="name" value=" " />
</p>
<p><label for="email" class="label1">Email address</label>
<input type="text" name="email" id="email" value=" " />
</p>
<p><label for="phoneno" class="label1">Phone Number (Optional)</label>
<input type="text" name="phoneno" id="phoneno" value=" " size="25" />
</p>
<p><label for="message" class="label1">Text Message/Request</label>
<textarea name="message" rows="5" id="message" cols="65" value=" "></textarea>
<p><input type="submit" name="Submit" id="submit" value="Submit" /></p>
</form>
</fieldset>
</body>
</html>
<script>
$('#subform').submit(function () {
// we stoped it
event.preventDefault();
var name = $('#name').val();
var email = $('#email').val();
var phoneno = $('#phoneno').val();
var message = $("#message").val();
echo '<p>107 Name='.$name. ' email='.$email.' Phone='.$phoneno. ' Message='.$message.'</p>';
// needs for recaptacha ready
grecaptcha.ready(function () {
// do request for recaptcha token
// response is promise with passed token
grecaptcha.execute('6LdW3V8hLPANABXKYnPSjhyF6nG4SrbRYbGlBdMPt', { action: 'Submit' }).then(function (token) {
// add token to form
$('#subform').prepend('<input type="hidden" name="g-recaptcha-response" value="' + token + '">');
$.post("LDA108.php", { name: name, email: email, phoneno: phoneno, message: message, token: token }, function (result) {
console.log(result);
});
});
});
});
</script>
On the day I asked this question 25/8/2022 I ran 18 tests on the program. Today on google the I have checked and received an average score of 0.9. However the data is not getting to LDA108.php. The
problem appears to be with the post only working when their is an error in the above program?
This is my first page.
<!DOCTYPE html>
<html>
<head>
<title>Student List</title>
</head>
<body>
<h1>Customer Form</h1>
<form>
<div>
<label>Customer Name:</label>
<input type="text" autofocus id="name">
</div>
<br>
<div>
<label>Address:</label>
<input type="text" id="address">
</div>
<button type="button" onclick="myFunction()">Submit</button>
</form>
<!-- JavaScript -->
<script type="text/javascript" src="./javascript.js"></script>
</body>
</html>
This is my second page.
<!DOCTYPE html>
<html>
<head>
<title>Student List</title>
</head>
<body>
<p id="1"></p>
<!-- JavaScript -->
</body>
</html>
MY JAVASCRIPT
function myFunction() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function(){
name = document.getElementById('name').value;
address = document.getElementById('address').value;
document.getElementById("1").innerHTML="<h1>alola="+name+"</h1>";
document.getElementById("2").innerHTML=address;
}
xhttp.open("GET", name);
xhttp.send();
}
I would like to display my name when typing my name from first page in the customer name label, and when i click submit. my second page display my name in the "id=1".
Ajax and ajax like techniques (fetch etc.) are usually used to either post data to a form or to get data from a url.
To send data from one HTML page to another you would need some kind of database and server side code to capture and store it and later retrive it.
If you just want inputed client side data to persist across pages then look at sessionStorage or localStorage, for example to keep the name we type until we exit the browser or clear session data:
First page:
<form>
<div>
<label>Customer Name:</label>
<input type="text" autofocus id="name">
</div>
<br>
<div>
<label>Address:</label>
<input type="text" id="address">
</div>
<button type="button" onclick="">Submit</button>
</form>
<script>
const name=document.getElementById('name')
name.addEventListener("keyup", (e) => {
sessionStorage.setItem('uname', name.value);
});
</script>
Second page:
<body>
<p id="usersName"></p>
<script>
let userNameElm = document.getElementById('usersName');
userNameElm.innerText = sessionStorage.getItem('uname');
</script>
</body>
Just remember to be careful what you store, and that it's only stored on the frontend/client side.
I have a input form and want to save the data that I haved insert into a file. Should I use get and set for this? Anyone have any ideas on what I should do?
function myfunction() {
if (validation()) // Calling Validation Function
{
// Serializing Form Data And Displaying It In <p id="wrapper"></p>
document.getElementById("wrapper").innerHTML = serialize(document.forms[0]); // Serialize Form Data
document.getElementById("form").reset(); // Reset Form Fields
}
}
function validation() {
var name = document.getElementById("namn").value;
var number = document.getElementById("number").value;
}
<!DOCTYPE html>
<html lang="sv">
<head>
<title>Write</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="http://form-serialize.googlecode.com/svn/trunk/serialize-0.2.min.js" type="text/javascript"></script> <!-- For Serialization Function -->
<script src="hej.js"></script> <!-- Include JavaScript File Here-->
</head>
<body>
<div id="main">
<div id="login">
<hr/>
<form action="" method="post">
<label>Name:</label>
<input type="text" name="name" id="name" required="required" placeholder="fill in your name"/><br /><br />
<label>Number :</label>
<input type="text" name="number" id="number" required="required" placeholder="0876856"/><br/><br />
<input onclick="myfunction()" type="submit"id= "submit" value=" Submit " name="submit"/><br />
</form>
</div>
</div>
</body>
</html>
Thanks in advance!
If you use the normal $_POST you can access the data over $_POST and write it with fopen, fwrite to a file. Over ajax you have to send the Data to a PHP File and do the same there. You cant access the local filesystem over Javascript.
<?php
if(isset($_POST) && !empty($_POST){
// reformat your data here and format it
$yourDataToWriteInTheData = $_POST['firstname'] . '|' . $_POST['lastname'] . PHP_EOF;
// Open the file (or create it, read the fopen manual)
$fileHandler = fopen('file1.txt', 'a+');
fwrite($fileHandler, $yourDataToWriteInTheData);
fclose($fileHandler);
}
I have two HTML pages: firstpage.html and secondpage.html. In firstpage.html, there is a form-
firstpage.html:
<!DOCTYPE html>
<html>
<head>
<title>Form Filling</title>
</head>
<body>
<form action="secondpage.html" method="GET">
Enter Serial Number: <input type="number" name="serialNumber" />
<input type="submit" value="Submit" />
</form>
</body>
</html>
The firstpage data is sent to secondpage.html. I want to display and use the form data serialNumber in secondpage.html-
secondpage.html:
<!DOCTYPE html>
<html>
<head>
<title>Display</title>
</head>
<body>
<form name="selva" action="thirdpage.html">
<input type="hidden" name="kumar">
</form>
<script type="text/javascript">
var locate=window.location;
document.selva.kumar.value=locate;
var text=document.selva.kumar.value;
function pass(str)
{
point=str.lastIndexOf('=');
return(str.substring(point+1,str.length));
}
document.write("Serial Number" + pass(text));
</script>
</body>
</html>
So now I can pass the serialNumber variable from firstpage.html to secondpage.html so that the above code in secondpage.html will show the serial nuimber, and I want same serial number in at thirdpage-
thirdpage.html:
<!DOCTYPE html>
<html>
<head>
<title>Repeating</title>
</head>
<body>
<form method="link">
Enter Serial Number2: <input type="number" name="burns" />
<input type="submit" value="Submit" />
</form>
</body>
</html>
please tell how to print a data in all those pages?
The simplest method I could find for this is, write all the three pages in a single html file and display them based on conditions. This way you dont need to use localstorage.
Other method will be to use query parameters. You can simply learn how to use them. Here's the link to simple javascript-handled query params plugin:
http://jillix.github.io/url.js/
You can pass the serial no as a query parameter to another html. If you are confused on how to use this method, let me know and I'll tell you in detail.
I'm completely new with AngularJS and attempting to capture, parse, and display data from a SOAP web service. So far I can call successfully call a public weather service, capture and display the returned XML data, convert the XML to a JSON string, but I'm not having any success binding/displaying the JSON data. Below are my HTML and JS files. Thanks in advance for any advice/suggestions!
MyHelloView.html
<!doctype html>
<html>
<head>
<script language="JavaScript" type="text/JavaScript" src="angular.min.js"> </script>
<script language="JavaScript" type="text/JavaScript" src="xml2json.js"></script>
<script language="JavaScript" type="text/JavaScript" src="MyHelloController.js"> </script>
</head>
<body ng-app>
<title>My Simple Angular App</title>
<div ng-controller='MyHttpController'>
{{soapResponse}}
<br/><br/>
{{jsonData}}
<br/><br/>
WeatherReturn: <br/>
Success: <input type="text" ng-model="jsonData.Success" /> <br/>
ResponseText: <input type="text" ng-model="jsonData.ResponseText" /> <br/>
State: <input type="text" ng-model="jsonData.State" /> <br/>
City: <input type="text" ng-model="jsonData.City" /> <br/>
WeatherStationCity: <input type="text" ng-model="jsonString.WeatherStationCity" /> <br/>
WeatherID: <input type="text" ng-model="jsonData.WeatherID" /> <br/>
Description: <input type="text" ng-model="jsonData.Description" /> <br/>
Temperature: <input type="text" ng-model="jsonData.Temperature" /> <br/>
RelativeHumidity: <input type="text" ng-model="jsonData.RelativeHumidity" /> <br/>
<div ng-repeat="field in jsonData.fields">
{{field.name}}: <input type="text" ng-model="field.value">
</div>
<br/><br/>
</div>
</body>
</html>
MyHelloController.js
function MyHttpController($scope, $http) {
$scope.loaded = false;
$scope.soapResponse = 'no response yet';
$http.get('http://wsf.cdyne.com//WeatherWS/Weather.asmx/GetCityWeatherByZIP?ZIP=60301').then(function(result){
$scope.soapResponse = result.data;
var x2js = new X2JS(); // convert XML data to JSON
$scope.jsonData = x2js.xml_str2json(result.data);
$scope.loaded = true;
});
}
Your xml is being delivered like below, which means you just need to pull the data off the top of the json object. Just an aside, you probably will want to look into putting your controller onto a module and moving the weather stuff into a service... but you didn't ask about that.
$scope.jsonData = x2js.xml_str2json(result.data).WeatherReturn;
<WeatherReturn xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns="http://ws.cdyne.com/WeatherWS/">
<Success>true</Success>
<ResponseText>City Found</ResponseText>
<State>IL</State>
<City>Oak Park</City>
<WeatherStationCity>Maywood</WeatherStationCity>
<WeatherID>14</WeatherID>
<Description>Cloudy</Description>
<Temperature>27</Temperature>
<RelativeHumidity>63</RelativeHumidity>
<Wind>S9</Wind>
<Pressure>29.95F</Pressure>
<Visibility/>
<WindChill/>
<Remarks/>
</WeatherReturn>