使用HTML表单将输入数据传递到Javascript代码_Javascript_Html_Google Apps Script

使用HTML表单将输入数据传递到Javascript代码

javascript html google-apps-script

使用HTML表单将输入数据传递到Javascript代码,javascript,html,google-apps-script,Javascript,Html,Google Apps Script,我试图将HTML表单中的输入用于Javascript代码。输入是3个邮政编码，结果是计算它们之间的距离，然后是一个简单的算法。首先，我创建了一个html表单 <form> *Enter 5 digit US ZipCodes<br><br> Port ZipCode:<br> <input type="text" id="PortZip" value="31402"> <br><br> Importer

我试图将HTML表单中的输入用于Javascript代码。输入是3个邮政编码，结果是计算它们之间的距离，然后是一个简单的算法。首先，我创建了一个html表单

    <form>
*Enter 5 digit US ZipCodes<br><br>
Port ZipCode:<br>
<input type="text" id="PortZip" value="31402">
<br><br>
Importer ZipCode:<br>
<input type="text" id="ImporterZip" value="30308">
<br><br>
Exporter ZipCode:<br>
<input type="text" id="ExporterZip" value="30901">
<br><br>

<input type="button" value="Calculate" onclick="initialize()" />
</form>

完整的代码如下-

    <html>
<head>
</head>
<body>
<form>
*Enter 5 digit US ZipCodes<br><br>
Port ZipCode:<br>
<input type="text" name="PortZip" value="31402">
<br><br>
Importer ZipCode:<br>
<input type="text" name="ImporterZip" value="30308">
<br><br>
Exporter ZipCode:<br>
<input type="text" name="ExporterZip" value="30901">
<br><br>

<input type="button" value="Calculate" onclick="initialize()" />
</form> 

<div id="zip_code_output"></div>
<div id="map_canvas" style="width:650px; height:600px;"></div>




<script type="text/javascript">
function initialize() {

     //INITIALIZE GLOBAL VARIABLES
     var zipCodesToLookup1 = new Array('document.getElementById("PortZip").value', 'document.getElementById("ImporterZip").value', 'document.getElementById("ExporterZip").value', 'document.getElementById("PortZip").value');
     var output           = '<tr><th scope="col">From</th><th scope="col">To</th><th scope="col">Miles</th></tr>';
     var difference = "0";
     var totalDist = 0;
    // document.write(difference);
     //EXECUTE THE DISTANCE MATRIX QUERY
     var service = new google.maps.DistanceMatrixService();
     service.getDistanceMatrix({
          origins:      zipCodesToLookup1,
          destinations: zipCodesToLookup1,
          travelMode:   google.maps.TravelMode.DRIVING,
          unitSystem:   google.maps.UnitSystem.IMPERIAL
     }, function(response, status) {
          if(status == google.maps.DistanceMatrixStatus.OK) {
               var origins = response.originAddresses;
               var destinations = response.destinationAddresses;
               for(var i=0; i < origins.length-1; i++) {
                     var results = response.rows[i].elements;
                     output += '<tr><td>' + origins[i] + '</td><td>' + destinations[i+1] + '</td><td>' + results[i+1].distance.text + '</td></tr>';
                     if (i != 0){
                     totalDist += results[i+1].distance.value;
                     }
                     else {
                     totalDist -= results[i+1].distance.value;
                     }

               }
              output += '<tr><td></td><td>OUT OF ROUTE DISTANCE -</td><td>'+(totalDist/1000*0.621371).toFixed(0)+ ' mi</td></tr>';


               document.getElementById('zip_code_output').innerHTML = '<table cellpadding="5">' + output + '</table>';
          }
     });
}

//FUNCTION TO LOAD THE GOOGLE MAPS API
function loadScript() {
     var script  = document.createElement("script");
     script.type = "text/javascript";
     script.src  = "http://maps.googleapis.com/maps/api/js?key=AIzaSyCDZpAoR25KSkPTRIvI3MZoAg1NL6f0JV0&sensor=false&callback=initialize";
     document.body.appendChild(script);
}

window.onload = loadScript;

</script>
?>

</body>
</html>


*输入5位美国邮政编码


端口ZipCode:




导入器ZipCode:




导出器ZipCode:




函数初始化（）{
//初始化全局变量
var zipCodesToLookup1=新数组（'document.getElementById（“PortZip”）.value'，'document.getElementById（“ImporterZip”）.value'，'document.getElementById（“ExporterZip”）.value'，'document.getElementById（“PortZip”）.value'）；
var输出='FromToMiles'；
var差异=“0”；
var totalDist=0；
//文件。书写（差异）；
//执行距离矩阵查询
var service=new google.maps.DistanceMatrixService（）；
service.getDistanceMatrix({
起源：Zipcodetolookup1，
目的地：Zipcodetolookup1，
travelMode:google.maps.travelMode.DRIVING，
unitSystem:google.maps.unitSystem.IMPERIAL
}，功能（响应、状态）{
if（status==google.maps.DistanceMatrixStatus.OK）{
var origins=response.originAddresses；
var destinations=response.destinationaddress；
对于（变量i=0；i

代码不起作用。我怀疑我的html表单代码不正确。欢迎更正。

杜德，您正在使用javascript中的document.getElementbyId。但是你的身份证在表格里的什么地方？你已经给它起了名字。此外，阵列初始化错误。您正在以字符串形式传递参数。按如下方式修改您的代码：

表格：

<form>
    *Enter 5 digit US ZipCodes<br><br>
    Port ZipCode:<br>
    <input type="text" id="PortZip" value="31402">
    <br><br>
    Importer ZipCode:<br>
    <input type="text" id="ImporterZip" value="30308">
    <br><br>
    Exporter ZipCode:<br>
    <input type="text" id="ExporterZip" value="30901">
    <br><br>

    <input type="button" value="Calculate" onclick="initialize()" />
</form>


*输入5位美国邮政编码


端口ZipCode:




导入器ZipCode:




导出器ZipCode:

javascript：

<script>
function initialize() {

            //INITIALIZE GLOBAL VARIABLES
            var zipCodesToLookup1 = new Array(document.getElementById("PortZip").value, document.getElementById("ImporterZip").value, document.getElementById("ExporterZip").value, document.getElementById("PortZip").value);
            var output           = '<tr><th scope="col">From</th><th scope="col">To</th><th scope="col">Miles</th></tr>';
            var difference = "0";
            var totalDist = 0;
            console.log(zipCodesToLookup1);
            // document.write(difference);
            //EXECUTE THE DISTANCE MATRIX QUERY
            var service = new google.maps.DistanceMatrixService();
            service.getDistanceMatrix({
                origins:      zipCodesToLookup1,
                destinations: zipCodesToLookup1,
                travelMode:   google.maps.TravelMode.DRIVING,
                unitSystem:   google.maps.UnitSystem.IMPERIAL
                }, function(response, status) {
                if(status == google.maps.DistanceMatrixStatus.OK) {
                    var origins = response.originAddresses;
                    var destinations = response.destinationAddresses;
                    for(var i=0; i < origins.length-1; i++) {
                        var results = response.rows[i].elements;
                        output += '<tr><td>' + origins[i] + '</td><td>' + destinations[i+1] + '</td><td>' + results[i+1].distance.text + '</td></tr>';
                        if (i != 0){
                            totalDist += results[i+1].distance.value;
                        }
                        else {
                            totalDist -= results[i+1].distance.value;
                        }

                    }
                    output += '<tr><td></td><td>OUT OF ROUTE DISTANCE -</td><td>'+(totalDist/1000*0.621371).toFixed(0)+ ' mi</td></tr>';


                    document.getElementById('zip_code_output').innerHTML = '<table cellpadding="5">' + output + '</table>';
                }
            });
        }

        //FUNCTION TO LOAD THE GOOGLE MAPS API
        function loadScript() {
            var script  = document.createElement("script");
            script.type = "text/javascript";
            script.src  = "http://maps.googleapis.com/maps/api/js?key=AIzaSyCDZpAoR25KSkPTRIvI3MZoAg1NL6f0JV0&sensor=false&callback=initialize";
            document.body.appendChild(script);
        }

        window.onload = loadScript;

        </script>


函数初始化（）{
//初始化全局变量
var zipCodesToLookup1=新数组（document.getElementById（“PortZip”）.value，document.getElementById（“ImporterZip”）.value，document.getElementById（“ExporterZip”）.value，document.getElementById（“PortZip”）.value）；
var输出='FromToMiles'；
var差异=“0”；
var totalDist=0；
控制台日志（zipCodesToLookup1）；
//文件。书写（差异）；
//执行距离矩阵查询
var service=new google.maps.DistanceMatrixService（）；
service.getDistanceMatrix({
起源：Zipcodetolookup1，
目的地：Zipcodetolookup1，
travelMode:google.maps.travelMode.DRIVING，
unitSystem:google.maps.unitSystem.IMPERIAL
}，功能（响应、状态）{
if（status==google.maps.DistanceMatrixStatus.OK）{
var origins=response.originAddresses；
var destinations=response.destinationaddress；
对于（变量i=0；i


将ID添加到form元素并删除数组中的引号 那么你的问题是什么？你想做什么？代码不起作用。我怀疑我的html表单代码不正确。您如何将表单数据传递给javascript？表单没有提交操作。我试图通过查看类似的示例来编写代码
<script>
function initialize() {

            //INITIALIZE GLOBAL VARIABLES
            var zipCodesToLookup1 = new Array(document.getElementById("PortZip").value, document.getElementById("ImporterZip").value, document.getElementById("ExporterZip").value, document.getElementById("PortZip").value);
            var output           = '<tr><th scope="col">From</th><th scope="col">To</th><th scope="col">Miles</th></tr>';
            var difference = "0";
            var totalDist = 0;
            console.log(zipCodesToLookup1);
            // document.write(difference);
            //EXECUTE THE DISTANCE MATRIX QUERY
            var service = new google.maps.DistanceMatrixService();
            service.getDistanceMatrix({
                origins:      zipCodesToLookup1,
                destinations: zipCodesToLookup1,
                travelMode:   google.maps.TravelMode.DRIVING,
                unitSystem:   google.maps.UnitSystem.IMPERIAL
                }, function(response, status) {
                if(status == google.maps.DistanceMatrixStatus.OK) {
                    var origins = response.originAddresses;
                    var destinations = response.destinationAddresses;
                    for(var i=0; i < origins.length-1; i++) {
                        var results = response.rows[i].elements;
                        output += '<tr><td>' + origins[i] + '</td><td>' + destinations[i+1] + '</td><td>' + results[i+1].distance.text + '</td></tr>';
                        if (i != 0){
                            totalDist += results[i+1].distance.value;
                        }
                        else {
                            totalDist -= results[i+1].distance.value;
                        }

                    }
                    output += '<tr><td></td><td>OUT OF ROUTE DISTANCE -</td><td>'+(totalDist/1000*0.621371).toFixed(0)+ ' mi</td></tr>';


                    document.getElementById('zip_code_output').innerHTML = '<table cellpadding="5">' + output + '</table>';
                }
            });
        }

        //FUNCTION TO LOAD THE GOOGLE MAPS API
        function loadScript() {
            var script  = document.createElement("script");
            script.type = "text/javascript";
            script.src  = "http://maps.googleapis.com/maps/api/js?key=AIzaSyCDZpAoR25KSkPTRIvI3MZoAg1NL6f0JV0&sensor=false&callback=initialize";
            document.body.appendChild(script);
        }

        window.onload = loadScript;

        </script>