如何将参数从脚本传递到 html 表单值答案

【问题标题】：How to pass parameters from script to html form value如何将参数从脚本传递到 html 表单值
【发布时间】：2020-12-27 13:05:44
【问题描述】：

我正在制作网络应用程序，需要将用户位置坐标存储在数据库中。使用 api（在脚本中）我获取了数据，现在需要将其从脚本传递到表单值，以便我可以将其输入到数据库中。到目前为止，我做了这个

<!DOCTYPE html>
<html>
<head>
  <script src="https://api.mapbox.com/mapbox-gl-js/v2.0.0/mapbox-gl.js
"></script>
  <link href="https://api.mapbox.com/mapbox-gl-js/v2.0.0/mapbox-gl.css
" rel="stylesheet" />
  <style>
    body { margin: 0; padding: 0; }
    #map { height: 400px; width: 100%; }
  </style>
</head>
<body>

<p>Click the button to get your coordinates.</p>

<button onclick="getLocation()">Try It</button>

<p id="demo"></p>


<script>
  var x = document.getElementById("demo");

  function getLocation() {
    
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(showPosition);
    } else {
      x.innerHTML = "Geolocation is not supported by this browser.";
    }
  }

  function showPosition(position) {
    x.innerHTML = "Latitude: " + vratiH(position) +
            "<br>Longitude: " + vratiW(position);
    mapboxgl.accessToken = 'My Token';
    var map = new mapboxgl.Map({
      container: 'map', // container id
      style: 'mapbox://styles/mapbox/streets-v11', // style URL
      center: [position.coords.longitude,position.coords.latitude], // starting position [lng, lat]
      zoom: 18 // starting zoom

  });}
  function  returnH(position){
    return position.coords.latitude;
  }
  function  returnW(position){
    return position.coords.longitude;
  }
  
</script>
<br>
<div id="map"></div>

<form action=".." method = "POST">
    < input type: hide; value: returnH; name: H >
    < input type: hide; value: returnW; name: W >
    

</form>
</body>
</html>

任何帮助都会很棒，我对此很陌生。

【问题讨论】：

这篇文章会给你一个intstackoverflow.com/questions/10095983/…

标签： javascript html css node.js

【解决方案1】：

你应该把 showPosition 改成这样：

    <script>
        function showPosition(position) {
            let hData = returnH(position);
            let wData = returnW(position);

            x.innerHTML = "Latitude: " + hData +
            "<br>Longitude: " + wData;
            mapboxgl.accessToken = 'My Token';
            var map = new mapboxgl.Map({
                container: 'map', // container id
                style: 'mapbox://styles/mapbox/streets-v11', // style URL
                center: [position.coords.longitude, position.coords.latitude], // starting position [lng, lat]
                zoom: 18 // starting zoom

            });

            document.querySelector("#hValue").value = hData;
            document.querySelector("#wValue").value = wData;
        }
        function returnH(position) {
            return position.coords.latitude;
        }
        function returnW(position) {
            return position.coords.longitude;
        }
    </script>

并将形式更改为：

<form action=".." method="POST">
    <input type="hidden" id="hValue" />
    <input type="hidden" id="wValue" />
</form>

【讨论】：