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

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 = "address"。这样的表格看起来如何？如果有人能花一两分钟解释 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/

Answer 2

首先在html中创建一个表单。在其中包含您的外部 javascript 文件。

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

在您的外部 javascript 文件中...即 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);
}

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

How do I read input data in a form?

html

javascript

forms

google-geocoder