Передайте результат, который отображается внутри <span>, в форму html и отправьте его на другую страницу. - PullRequest
Новая
       0

Передайте результат, который отображается внутри <span>, в форму html и отправьте его на другую страницу.

0 голосов
/ 25 марта 2020

У меня есть JavaScript, который отображает Long и lat, когда я нажимаю на карту, все работает нормально, и я могу отобразить результат JavaScript внутри этого диапазона в моем HTML <span id="onIdlePositionView"></span>, используя идентификатор ценность.

Теперь я хочу передать это значение в форму 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>

Ответы [ 2 ]

0 голосов
/ 25 марта 2020

Итак, я решил проблему, попробовав другие варианты, вместо .innerHTML я использовал .value и установил идентификатор поля ввода текста в переменную

Ниже приведен обновленный код : 

<!-- 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>
0 голосов
/ 25 марта 2020

создайте скрытое поле в форме, используя <input type='hidden' value='' id='myfield'>, и просто заполните скрытое поле вместе с <span>, установив атрибут значения myfeld в location.lat et c

РЕДАКТИРОВАТЬ

Вы все еще можете заполнить данные в скрытые элементы, например, как я заполнил два скрытых ввода в этом примере: 

<!-- 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" >

<!--   HIDDEN FORM INPUTS  -->
   <input type="hidden" name="longitude" id="longitudeInput">
   <input type="hidden" name="latitude" id="latitudeInput">
<!--  -->

<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;


  // populate the hidden FORM elements
    document.querySelector("#longitudeInput").value = location.lng;
    document.querySelector("#latitudeInput").value = location.lat;
  };


  // 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;

   // populate the hidden FORM elements
    document.querySelector("#longitudeInput").value = location.lng;
    document.querySelector("#latitudeInput").value = location.lat;

  });


</script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...