<button type="submit"> 不适用于移动设备答案

【问题标题】：<button type="submit"> not working on mobile devices<button type="submit"> 不适用于移动设备
【发布时间】：2022-01-12 10:05:33
【问题描述】：

我有这个表格，它使用 Google 地图向用户显示地址与丹麦 Silkeborg 市的距离。

第一个输入字段是地址，第二个输入字段是邮政编码。

表格可以看这里：https://silkeborgkalder.eistrupweb.dk/job-i-silkeborg/

在桌面上，表单可以正常工作。但是，在移动设备上，当我填写表格并点击提交按钮“Vis afstand”（显示距离）时，什么也没有发生。

提交后执行以下Javascript：

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>

【问题讨论】：

您在控制台出现此错误：Uncaught ReferenceError: __gaTracker is not defined.

标签： javascript html forms mobile

【解决方案1】：

除了来自 gaTracker 的错误之外，您似乎缺少一个事件侦听器

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>

但为什么是脚本呢？

<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>

【讨论】：