时间戳

首页 > 解决方案 > 将显示在HTML 表单中的结果传递给另一个页面

javascript - 将显示在HTML 表单中的结果传递给另一个页面

问题描述

我有一个 JavaScript，当我单击地图时显示 Long 和 lat，一切正常，我可以<span id="onIdlePositionView"></span>使用 id 值在我的 HTML 中显示这个跨度内的 JavaScript 结果。

现在，我想要将该值传递到 HTML 表单并将其发送到另一个页面。

这是代码：

  <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example</title>
  <script type="text/javascript"src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDVIHo_tvbLXtuzQJVYRolxIi0_Lk_8nFs"></script>

  <script src="https://unpkg.com/location-picker/dist/location-picker.min.js"></script>
  <style type="text/css">
    #map {
      width: 100%;
      height: 480px;
    }
  </style>
</head>

<body>
<div id="map"></div>
<br>
<button id="confirmPosition" type="hidden"></button>
<br>
    <!-- DISPLAY LONG AND LAT FROM THE MAP -->
<span id="onIdlePositionView"></span>


<!-- FORM TO SEND VALUE OF SPAN TO THE SECOND PAGE -->  
<form action="location_picker_map.php" method="post">

<input type="submit" name="submito">
</form>


<!-- SCRIPT TO FIND LONG AND LAT AND DSIPAY INTO THE SPAN VALUE -->    
<script>
  // Get element references
  var confirmBtn = document.getElementById('confirmPosition');
  var onClickPositionView = document.getElementById('onClickPositionView');
  var onIdlePositionView = document.getElementById('onIdlePositionView');

  // Initialize locationPicker plugin
  var lp = new locationPicker('map', {
    setCurrentPosition: true, // You can omit this, defaults to true
  }, {
    zoom: 15 // You can set any google map options here, zoom defaults to 15
  });

  // Listen to button onclick event
  confirmBtn.onclick = function () {
    // Get current location and show it in HTML
    var location = lp.getMarkerPosition();
    onClickPositionView.innerHTML = '' + location.lat + ',' + location.lng;
  };

  // Listen to map idle event, listening to idle event more accurate than listening to ondrag event
  google.maps.event.addListener(lp.map, 'idle', function (event) {
    // Get current location and show it in HTML
    var location = lp.getMarkerPosition();
    onIdlePositionView.innerHTML = '' + location.lat + ',' + location.lng;
  });
</script>

</body>
</html>

标签： javascripthtmlforms

解决方案

所以我在尝试不同的选项后解决了这个问题，我所做的是而不是 .innerHTML我使用.value并将文本输入字段的 id 设置为变量

以下是更新后的代码：

<!-- FORM TO SEND VALUE OF SPAN TO THE SECOND PAGE -->  
<form action="location_picker_map.php" method="post">
<button id="confirmPosition" type="hidden"></button>


<input type="text" name="fd_onIdlePositionView" id="id1" >
<input type="submit" name="submito">
</form>

<!-- SCRIPT TO FIND LONG AND LAT AND DSIPAY INTO THE SPAN VALUE -->    
<script>
  // Get element references
  var confirmBtn = document.getElementById('confirmPosition');
  var onClickPositionView = document.getElementById('onClickPositionView');
  var onIdlePositionView = document.getElementById('id1');
 // var inputF = document.getElementById("id1"); 

  // Initialize locationPicker plugin
  var lp = new locationPicker('map', {
    setCurrentPosition: true, // You can omit this, defaults to true
  }, {
    zoom: 15 // You can set any google map options here, zoom defaults to 15
  });

  // Listen to button onclick event
  confirmBtn.onclick = function () {
    // Get current location and show it in HTML
    var location = lp.getMarkerPosition();
    onClickPositionView.innerHTML = '' + location.lat + ',' + location.lng;
  };


  // Listen to map idle event, listening to idle event more accurate than listening to ondrag event
  google.maps.event.addListener(lp.map, 'idle', function (event) {
    // Get current location and show it in HTML
    var location = lp.getMarkerPosition();
    onIdlePositionView.value = '' + location.lat + ',' + location.lng;

  });


</script>

推荐阅读