On one of my pages in Drupal, I have a panel that contains the following html code:
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=geometry&sensor=false"></script>
<script type="text/javascript">
var dirService, initAddr, endLoc, doc;
function initialize() {
dirService = new google.maps.DirectionsService();
initAddr = "85 E San Fernando Street San Jose, CA 95113";
}
function showLocation() {
doc = document.getElementById("results_area");
endLoc = document.forms[0].address2.value;
findFromAddress();
}
function findFromAddress() {
dirService.route({'destination': initAddr, 'origin': endLoc, 'travelMode': google.maps.TravelMode.DRIVING}, function (result, status) {
if (status === google.maps.DirectionsStatus.OK) {
var distance = result.routes[0].legs[0].distance.value;
var miles = Math.round(distance * 0.000621371192 * 100) / 100;
alert("Distance from Loves Cupcakes is roughly" + miles
+ " miles" + "Estimated price is (price)" );
}
else {
alert("INVALID ZIP CODE");
}
});
}
</script>
</head>
<body onload="initialize()">
<p> Enter in zip code of desired delivery location</p>
<form action="#" onsubmit="showLocation(); return false;">
<p><input class="address_input" name="address2" size="20" type="text" /> <input name="find" type="submit" value="Search" /></p>
</form>
<p id="results_area"> </p>
Simply put, it takes a zipcode and calculates the distance from a specified location.
The HTML page works on its own, but when I enter it into a panel, some weird stuff happens that I don't understand. When I hit the "Submit" button, the page is reloaded, but with a slightly different URL and no alert box pops up. The URL changes from ../contact_us to ../Contact_Us?address2=&find=Search#. I understand the address2 and search are elements from my HTML code, but can anyone help me figure out why this is happening (I am assuming it has something to do with drupal, not the code itself, but not too sure)?
When the submit button is clicked, the browser sends a HTTP GET request to the address with the address2 and find values as parameters.
In your case, address2 has no value and find has a value of 'Search'
See here for a comprehensive explanation : https://www.rfc-editor.org/rfc/rfc3986#section-3
Related
I have a Google Form to collect information from my workers working in remote locations
Emp No *
Punch *
Customer details / mode or travel
The data goes into a Google spreadsheet with the below structure
Timestamp Emp No Punch Remark Name GeoCode GeoAddress Email
I am able to capture the GPS co-ordinates of the user by the below script. I made a web app (anyone even anonymous can run) and asked the user to click the link.
What I am not able to do :
I want to save the email ID (or emp no) of the user filling the form. But the email ID is not getting captured into the form. If I fill the form, the email ID is captured. For other users it is not captured. I don't want all the users to authenticate the script (to run the script as the logged in user). It must be captured by some other way. Is it possible?
If the GPS is not captured (it is empty), I want to display a different message in the HTML page. How to do it?
Code.gs
function doGet() {
return HtmlService.createHtmlOutputFromFile("Index");
}
//
function getLoc(value) {
var destId = FormApp.getActiveForm().getDestinationId() ;
var ss = SpreadsheetApp.openById(destId) ;
var respSheet = ss.getSheetByName("Location");
var numResponses = respSheet.getLastRow();
var currentemail = Session.getActiveUser().getEmail();
var c=value[0]; var d=value[1];
var e=c + "," + d ;
//respSheet.getRange(numResponses,6).setValue(e);
//respSheet.getRange(numResponses,8).setValue(currentemail);
var response = Maps.newGeocoder().reverseGeocode(value[0], value[1]);
var f= response.results[0].formatted_address;
//respSheet.getRange(numResponses,7).setValue(f);
respSheet.getRange(numResponses,6,1,3 ).setValues([[ e, f, currentemail ]]);
}
//
index.html
<!DOCTYPE html>
<html>
<script>
(function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
}
})()
function showPosition(position){
var a= position.coords.latitude;
var b= position.coords.longitude;
var c=[a,b]
getPos(c)
function getPos(value){
google.script.run.getLoc(value);
}
}
</script>
<body>
<p>Please ensure your GPS is on to record your location. You can generate the report from website to check. Pl. close this window (version 3)</p>
</body>
</html>
From the question
I want to save the email ID (or emp no) of the user filling the form. But the email ID is not getting captured into the form. If I fill the form, the email ID is captured. For other users it is not captured. I don't want all the users to authenticate the script (to run the script as the logged in user). It must be captured by some other way. Is it possible?
On a web application created using Google Apps Script to automatically get the user email ID you could set your web application to be executed as the user running the application instead being executed as you but if don't want to use this feature then you have to set your own authentication process.
From the question
If the GPS is not captured (it is empty), I want to display a different message in the HTML page. How to do it?
Use a JavaScript conditional expression
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
alert('Can\'t get the position');
}
})()
function showPosition(position){
var a= position.coords.latitude;
var b= position.coords.longitude;
var c=[a,b];
getPos(c);
function getPos(value){
google.script.run.getLoc(value);
}
}
The above code uses alert but you could use the DOM.
Resources
Web Apps | Google Apps Script
Document Object Model (DOM)
I was able to make a complete solution without any google form (just HTML) and managed to display an alert message also. The "Login" is still not possible.
Code.gs
It runs the form and saves the answers in the required columns into google sheet.
It runs faster than google form and "Submit" has to be clicked only once.
As the saving happens by "append row", the jumbling of data (between rows) which was happening in my earlier method is avoided.
/* #Include JavaScript and CSS Files */
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename)
.getContent();
}
/* #Process Form */
function processForm(formObject) {
var url = "https://docs.google.com/spreadsheets/d/...../edit#gid=52499297";
var ss = SpreadsheetApp.openByUrl(url);
var ws = ss.getSheetByName("Location");
var response = Maps.newGeocoder().reverseGeocode(formObject.lat, formObject.long);
var address= response.results[0].formatted_address;
ws.appendRow(
[
new Date(),
formObject.empno,
formObject.punch,
formObject.rem,
"",
formObject.lat+","+formObject.long,
address
]
);
}
Index.html
This has the questions.
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<?!= include('JavaScript'); ?>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-6">
<form id="myForm" onsubmit="handleFormSubmit(this);">
<p class="h4 mb-4 text-left">Record Attendance and Location</p>
<div class="form-group">
<label for="empno">Emp No - Click to see list</label>
<input type="number" class="form-control" id="empno" name="empno" min="1" max="9999999" required>
</div>
<div class="form-group">
<label for="punch">Punch (Select one)</label>
<select class="form-control" id="punch" name="punch" required>
<option selected disabled hidden style='display: none' value=''></option>
<option value="In">In</option>
<option value="Out">Out</option>
<option value="Started">Started</option>
<option value="Reached">Reached</option>
</select>
</div>
<div class="form-group">
<label for="rem">Remark</label>
<input type="text" class="form-control" id="rem" name="rem">
</div>
<div class="form-group">
<input type="hidden" class="form-control" id="lat" name="lat">
<input type="hidden" class="form-control" id="long" name="long">
</div>
<button type="submit" class="btn btn-primary btn-block">Submit</button>
</form>
<div id="output"></div>
</div>
</div>
</div>
</body>
</html>
JavaScript.html
This processes the answers
<script>
function showPosition() {
navigator.geolocation.getCurrentPosition(showMap);
}
function showMap(position) {
// Get location data
var lat = position.coords.latitude;
var geo1 = document.getElementById("lat");
geo1.value = lat;
var long = position.coords.longitude;
var geo2 = document.getElementById("long");
geo2.value = long;
}
// Prevent forms from submitting.
function preventFormSubmit() {
var forms = document.querySelectorAll('form');
for (var i = 0; i < forms.length; i++) {
forms[i].addEventListener('submit', function(event) {
event.preventDefault();
});
}
}
window.addEventListener('load', preventFormSubmit);
window.addEventListener('load', showPosition);
function handleFormSubmit(formObject) {
google.script.run.processForm(formObject);
document.getElementById("myForm").reset();
alert('Data saved successfully');
}
</script>
I'm just starting to learn JavaScript and therefore do not know much about how Forms are used or how to read from them. I'm trying to play around with Google's Geocode, and need some help with building a JS Form to read from.
I have the following JS code, outputting the longitude & latitude, and simply need a form to store some addresses in. The code I have looks as follows:
var geocoder = new google.maps.Geocoder();
var address = document.getElementById("address").value;
geocoder.geocode( {'address': address}, function(results, status) {
if(status == google.maps.GeocoderStatus.OK)
{
results[0].geometry.location.latitude
results[0].geometry.location.longitude
}
else
{
alert("Geocode was not successful for the following reason: " + status)
}
});
I'd like some help if possible to build a form this code can read an address from, where the ElementID = "address". How would such a form look? I'd much appreciate if someone could take a minute or two and explain how the JS works with the form. Any help is appreciated! Thank you, guys.
JS dosent care what the element is you just need to get the reference of the form from the DOM then you can do what you want (get the value).
a simple form can look like this
<form>
First name:<br>
<input type="text" id="firstname"><br>
Address:<br>
<input type="text" id="address">
</form>
<button onclick="myFunc()">Done!</button>
So when the button is click it will run a function myFunc which will get your data from the form and alert it.
function myFunc(){
var name = document.getElementById("firstname").value;
var address = document.getElementById("address").value;
alert(name + " lives at " + address);
}
more on getting elements by id here
https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById
you can also use jquery
function myFunc(){
var name = $("#firstname").val();
var address = $("#address").val();
alert(name + " lives at " + address);
}
https://api.jquery.com/id-selector/
First create a Form in html. Include your external javascript file in it.
<head>
<script type="text/javascript" src="index.js"></script> //index.js is name of javascript file which is in same location of this jsp page.
</head>
<body>
<form name="EmployeeDetails" action="ServletEmployee" method="post">
Employee Name:<input type="text" id="name"><br>
EmployeeID:<input type="text" id="employID"><br>
<input type="submit" value="Submit">
</form>
<input type="button" name="Click" id="mybutton" onclick="myButtonClick">
</body>
In your external javascript file...that is index.js
window.onload = function(){ // function which reads the value from html form on load without any button click.
var employeename = document.getElementById("name").value;
var employeeid = document.getElementById("employID").value;
alert("Name : "+employeename+" : EmployeeID : "+employeeid);
}
function myButtonClick(){ // function to read value from html form on click of button.
var empname = document.getElementById("name").value;
var empid = document.getElementById("employID").value;
alert("Name : "+empname+" : EmployeeID : "+empid);
}
So I have been working on this for a couple of days and as a newbie, I think the answer will really help my understanding of JavaScript.
I have a page that contains a form -- when a user submits the form a new window opens with form variables embedded within text in new window. It works fine.
The problem I am having is I want to add an alert to the new window if the user onClick types in NY || New York || NJ || New Jersey. I tested my if function (I left out the else after doing some research since else is really do nothing.
The way I want it to work is if someone types one of those four variables, a new window opens with the alert. If they don't type in one of those variables, only the new window opens.
I prepared a truncated test code which I'll put below. I know there are better ways to do this then the code I have written, and I bet there are probably easier ways with libraries, jquery, etc., but I would love for someone to show me how to add the askForHelp function so it will open the alert in the new window with code I have written. Again, that's b/c this is my knowledge base at this point, and it would help me see how to really write a statement. Thanks in advance for any help offered.
<!doctype html>
<html>
<head>
<title>test</title>
<meta charset="utf-8">
<script type="text/javascript">
function newWindow() {
allInfo= open("", "displayWindow");
allInfo.document.open();
allInfo.document.write('<!doctype html><html><head><title>Test</title><meta charset="utf-8"></head><body>');
allInfo.document.write(document.getElementById ('state').value);
allInfo.document.write('<p>' + document.getElementById ('zip').value);
allInfo.document.write('</section></body></html>');
allInfo.document.close();
}
function askForHelp () {
var volunteer = document.getElementById('state').value;
if (volunteer == "New York" || "NY" || "New Jersey" || "NJ") {
allInfo.document.open.alert("test test test"); //Do I put the statement here?
} // else do nothing
}
</script>
</head>
<body>
<script type="text/javascript">
</script>
<form id="infoForm" method="post" name="infoForm">
<p>State: </p>
<p><input type="text" id="state" placeholder="State or Region"></p>
<p>Zip: </p>
<p><input type="text" id="zip" placeholder="Zip code" required /></p>
<p><input type="button" value="Submit Information" onClick="newWindow(), askForHelp()" ></p> <!-- Should askForHelp() be here? -->
</form>
</body>
</html>
You have 3 problems in your code:
1- You are trying to get a value for element with id=country and you don't have any element with id=country
allInfo.document.write('<p>' + document.getElementById ('country').value);
2- alert() function is attached to the window object not to the document object. So when you want to call the alert in the new window, you should call it like this:
allInfo.alert("blah blah");
3- The If condition in your code will always return true it should modified and be like this:
if((volunteer == "New York") || (volunteer =="NY") || (volunteer =="New Jersey") || (volunteer =="NJ"))
I have made the above modifications in this jsFiddle. Please check it.
Since I'm using JSFiddle, it won't let me put document.write but you can still how it works.. Check out this Fiddle, below are the changes that I made..
HTML:
<p><input type="button" id="submit-btn" value="Submit Information" ></p>
JS:
function newWindow() {
alert("New Window");
}
function askForHelp () {
var volunteer = document.getElementById('state').value;
if (volunteer == "New York" || volunteer == "NY" || volunteer == "New Jersey" || volunteer == "NJ") {
alert("test test test");
}
}
document.getElementById('submit-btn').addEventListener("click", function(){
newWindow();
askForHelp();
});
Preface: I have contacted google and read the documentation. When this is finished it will display the map on the next page and have autosuggest on the first - I will not be violating the terms and conditions this way, so please dont start a flame war
I have set about trying to create my own minimal geocoder which geocodes without showing a map on the current page. I have found that there is no example code online for doing this! I am new to jquery but this is the best I could come up with. However, low and behold it doesn't work.
I am sure I have done something stupid, so I would appreciate it if someone could let me know if they spot any obvious reasons why this wouldn't work. I have never made a javascript before.
JSFiddle Link: http://jsfiddle.net/njDvn/9/
<html>
<head>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
function getLatLng() {
var geocoder = new google.maps.Geocoder();
var address = document.getElementById('address').value;
geocoder.geocode({
'address': address
}, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var latLng = results[0].geometry.location;
$('#lat').val(results[0].geometry.location.lat());
$('#lng').val(results[0].geometry.location.lng());
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
</script>
</head>
<body onload="initialize()">
<div>
<input id="address" type="textbox" value="Sydney, NSW">
<input type="button" value="Geocode" onclick="codeAddress()">
<input id="lat" type="textbox" value="lat">
<input id="lng" type="textbox" value="lng">
</div>
</body>
</html>
well first 2 things I can see are that the onclick of the button is calling codeAddress(), but you have not declared that function - you can change that to getLatLng() and it should work then. Plus the <body onload is calling initialize() which is also not declared. While that should not prevent the geocoder from firing you should probably fix it.
I have so far a working covert script to get Longitude and Latitude from an Address.
Problem is that I can't submit, while the submit button is used to get the Longitude and Latitude.
So I would like the following:
Address will be placed in a hidden field. (populated by my CMS, ExpressionEngine)
Than on page load the Longitude and Latitude will be collected in two input fields
than press submit and done.
But how to do this, I use the following code so far.
Please help.
<!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>
<title>Longitude and Latitude from address</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=YOUR KEY" type="text/javascript" charset="utf-8">
</script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
geocoder = new GClientGeocoder();
}
}
function showAddress(geolocation) {
if (geocoder) {
geocoder.getLatLng(
geolocation,
function(point) {
if (!point) {
alert(geolocation + " not found");
} else {
document.geoform.longitude.value = point.x;
document.geoform.latitude.value = point.y;
}
}
);
}
}
//]]>
</script>
</head>
<body onload="load()">
<form action="#" name="geoform" id="geoform" onsubmit="showAddress(this.geolocation.value); return false">
<input type="hidden" name="geolocation" value="Address goes here, populated by cms" size="50" />
Decimal Longitude:
<input name="longitude" type="text" id="longitude" value="" />
Decimal Latitude:
<input name="latitude" type="text" id="latitude" value="" />
<input type="submit" value="Longitude/latitude codes" />
</form>
</body>
</html>
By the time you're submitting the form, it's too late to make a request to geocode an address.
It's better to geocode the address on the page load, and then just submit the form.
function load() {
if (GBrowserIsCompatible()) {
geocoder = new GClientGeocoder();
geocoder.getLatLng(
document.geoform.geolocation.value,
function(point) {
if (!point) {
alert(geolocation + " not found");
} else {
document.geoform.longitude.value = point.x;
document.geoform.latitude.value = point.y;
}
}
);
}
}
By the way, three important points:
It's against Google's Terms of Service to geocode without displaying the results on a Google Map. See 10.1.1(g)
You shouldn't be developing with v2 anymore, it's deprecated and going away soon. Use v3 instead.
There is a web service geocoding API you can use to do this all in the server, and avoid this complexity altogether.