gpt4 book ai didi

javascript - 计算字段作为表单/php 输入

转载 作者:行者123 更新时间:2023-12-03 12:02:52 27 4
gpt4 key购买 nike

我正在尝试创建一个带有 map 的表单。您拖动标记,填写一些字段并提交。除了获取纬度和经度记录/echo 之外,我可以正常工作。

数据被发送到 .csv 文件并发送电子邮件。我无法将 lat/lng 字段用作输入 > php。

您可以看到jsfiddle在这里。

请注意,我正在使用 Mapbox 制作 map ,并且希望保留它。

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Display latitude longitude on marker movement</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.0.1/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.0.1/mapbox.css' rel='stylesheet' />

<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:935px; height: 700px; z-index: -9;}

pre.ui-coordinates {
position:absolute;
bottom:10px;
left:10px;
padding:5px 10px;
background:rgba(0,0,0,0.5);
color:#fff;
font-size:11px;
line-height:18px;
border-radius:3px;
}

.formarea{
position:absolute;
background: #08080a;
top:0px;
left:680px;
padding: 10px;
height: 680px;
width: 240px;
border: 0px solid black;
opacity: .8;
color: white;
}
.inputfield{
width: 100%;
}
.textlarge{
resize: both;
vertical-align: top;
}

#latui, #lngui{
color: red;
}
</style>

</head>
<body>


<div class="formarea">
<form id="myform" name="form1" method="post" autocomplete="on" action="pdata.php">
<label><b>Marker Type</b></label>
<select name="markertype" class="inputfield" id="markertype">
<option selected="selected" disabled='disabled'>-</option>
<option value="sidewalk issues">sidewalk issues</option>
<option value="litter">litter</option>
<option value="graffiti">graffiti</option>

</select>
<label><b>Notes</b></label>
<input class="inputfield textlarge" name="notes" id="notes" type="text" pattern="[^,]*" title="You may be using an invalid text symbol"/>
<hr>
<label><b>Coordinates</b></label>
<p id="latui"></p>
<p id="lngui"></p>
<input class="button buttonmin success small" type="submit" name="Submit" value="&#10003; Submit Form">
</form>
</div>


<div id='map'></div>
<pre id='coordinates' class='ui-coordinates'></pre>
<script>
L.mapbox.accessToken = 'pk.eyJ1IjoiZWpzMDYwMDMiLCJhIjoicTJ6M29PTSJ9.EM3fFLHt6IQR17e7aSw7Sg';
var map = L.mapbox.map('map', 'examples.map-i86nkdio')
.setView([41.756971085614175, -72.6800537109375], 12);

//var coordinates = document.getElementById('coordinates');
var latui = document.getElementById('latui');
var lngui = document.getElementById('lngui');

var marker = L.marker([41.756971085614175, -72.6800537109375], {
icon: L.mapbox.marker.icon({
'marker-size': 'large',
'marker-color': '#f86767',
'marker-symbol': 'star'
}),
draggable: true
}).addTo(map);

// every time the marker is dragged, update the coordinates container
marker.on('dragend', ondragend);

// Set the initial marker coordinate on load.
ondragend();

function ondragend() {
var m = marker.getLatLng();
//coordinates.innerHTML = 'Latitude: ' + m.lat + '<br />Longitude: ' + m.lng;
latui.innerHTML = m.lat;
lngui.innerHTML = m.lng;
}
</script>


</body>
</html>

感谢您的帮助,

埃里克

最佳答案

只需更改 <p>发送至<input>就像 this .

关于javascript - 计算字段作为表单/php 输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25330561/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com