javascript - 如何读取表单中的输入数据？

Question

我刚刚开始学习 JavaScript，因此不太了解如何使用表单或如何读取表单。我正在尝试使用 Google 的地理编码，并且需要一些帮助来构建可供读取的 JS 表单。

我有以下 JS 代码，输出经度和纬度，只需要一个表单来存储一些地址。我的代码如下所示:

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)
    }
});

如果可能的话，我需要一些帮助来构建一个表单，此代码可以从中读取地址，其中 ElementID =“地址”。这样的表格看起来怎么样？如果有人能花一两分钟解释一下 JS 如何处理表单，我将非常感激。任何帮助表示赞赏!感谢你们。

Answer 1

JS 不关心元素是什么，你只需要从 DOM 中获取表单的引用，然后你就可以做你想做的事情(获取值)。

一个简单的表单可以如下所示

<form>
 First name:<br>
 <input type="text" id="firstname"><br>
 Address:<br>
 <input type="text" id="address">
</form>
<button onclick="myFunc()">Done!</button>

因此，当单击按钮时，它将运行一个函数 myFunc ，该函数将从表单中获取数据并发出警报。

function myFunc(){
  var name = document.getElementById("firstname").value;
  var address = document.getElementById("address").value;
  alert(name + " lives at " + address);
}

有关通过 id 获取元素的更多信息，请参见此处 https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById

你也可以使用jquery

function myFunc(){
  var name = $("#firstname").val();
  var address = $("#address").val();
  alert(name + " lives at " + address);
}

https://api.jquery.com/id-selector/