如何将参数从脚本传递到 html 表单值
Posted
技术标签:
【中文标题】如何将参数从脚本传递到 html 表单值【英文标题】：How to pass parameters from script to html form value 【发布时间】：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>
任何帮助都会很棒，我对此很陌生。
【问题讨论】：
这篇文章会给你一个int***.com/questions/10095983/… 【参考方案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>
【讨论】：
以上是关于如何将参数从脚本传递到 html 表单值的主要内容，如果未能解决你的问题，请参考以下文章