I have this form which shows the user how far an address is from the city of Silkeborg in Denmark by using Google Maps.
The first input field is address and the second one is zipcode.
The form can be seen here: https://silkeborgkalder.eistrupweb.dk/job-i-silkeborg/
On desktop the form works as it should. However, on mobile devices nothing happens when I fill out the form and hit the submit button "Vis afstand" (Show distance).
When submitted the following Javascript is executed:
function vejviser() {
var adresse = document.getElementById("adresse");
var by = document.getElementById("by");
window.open("https://www.google.com/maps/dir/?api=1&origin=Silkeborg&destination=" + adresse.value + "+" + by.value + "&travelmode=driving")
}<form id="jobDistanceCalculator">
<input id="adresse" class="input-felt" type="text" placeholder="Arbejdspladsens adresse" name="adresse" /><br />
<input id="by" class="input-felt" type="number" placeholder="Arbejdspladsens postnummer" name="postnummer" /><br />
<button type="submit" class="submit-btn" value="Vis afstand">Vis afstand</button>
</form>Apart from the error from the gaTracker, it seems you are missing an event listener
window.addEventListener("load", function() {
document.getElementById("jobDistanceCalculator").addEventListener("load", function(e) {
e.preventDefault(); // stop submission
var adresse = document.getElementById("adresse");
var by = document.getElementById("by");
window.open("https://www.google.com/maps/dir/?api=1&origin=Silkeborg&destination=" + adresse.value + "+" + by.value + "&travelmode=driving")
})
})<form id="jobDistanceCalculator">
<input id="adresse" class="input-felt" type="text" placeholder="Arbejdspladsens adresse" name="adresse" /><br />
<input id="by" class="input-felt" type="number" placeholder="Arbejdspladsens postnummer" name="postnummer" /><br />
<button type="submit" class="submit-btn" value="Vis afstand">Vis afstand</button>
</form>But why a script?
<form id="jobDistanceCalculator" action="https://www.google.com/maps/dir/">
<input type="hidden" name="api" value="1" />
<input type="hidden" name="origin" value="Silkeborg" />
<input type="hidden" name="travelmode" value="driving" />
<input name="destination" class="input-felt" type="text" placeholder="Arbejdspladsens adresse og post nummer" /><br />
<button type="submit" class="submit-btn" value="Vis afstand">Vis afstand</button>
</form>