简体   繁体   English

如何将我的 javascript 变量发送到 html 表单?

[英]How to send my javascript variables in to a html form?

Im trying to write a small site to get my location and add some variables myself and later save this data in my database.我正在尝试编写一个小站点来获取我的位置并自己添加一些变量,然后将这些数据保存在我的数据库中。 The problem is that i cant sent in the data from my variables in javascript to my form in html.问题是我无法将 javascript 中的变量中的数据发送到 html 中的表单中。 Everything else works except this..除了这个,其他一切都有效..

Im trying to pass the values of mylat, mylong and myacc to the three hidden felds in my form.我试图将 mylat、mylong 和 myacc 的值传递给我表单中的三个隐藏字段。 Any suggestion on how for a non coder?关于非编码人员的任何建议?

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>


    <!-- Geolocation API, to bad accuracy -->

    <script src="js/jquery-2.1.4.min.js"></script>
    <script src="http://maps.google.com/maps/api/js?sensor=true"></script>



    <script>

      x = navigator.geolocation;
      x.getCurrentPosition( success, failure, options );

      var options = {
        enableHighAccuracy: true,
        timeout: 30000,
        maximumAge: 30000 // If "0", new positions will be demanded
      };

      function success(position){

        //Fetch coordinates
        var mylat = position.coords.latitude;
        var mylong = position.coords.longitude;
        var myacc = position.coords.accuracy;
        $('#lat').html(mylat);
        $('#long').html(mylong);
        $('#acc').html(myacc);

        //Google-API-Ready latitude and longitue

        var coords = new google.maps.LatLng(mylat, mylong);

        //Setting up our Google map

        var mapOptions = {
          zoom: 16,
          center: coords,
          mapTypeId: google.maps.MapTypeId.SATELLITE
          }

        //Creating the map

        var map = new google.maps.Map(document.getElementById("map"), mapOptions);

        //Create a marker

        var marker = new google.maps.Marker({map: map, position: coords});

      }

      function failure(){
        $('body').append("<p> Koordinater kunde inte läsas in </p> ");

      }


    </script>

    <style>

      #map {
        width: 400px;
        height: 400px;
      }

    </style>
    <p>Latitude : </p><div id="lat"></div>
    <p>Longitude : </p><div id="long"></div>
    <p>Accuracy (m): </p><div id="acc"></div>


  <body>


      <form name="form" action="x-form.php" method="POST" />


      <input type="hidden" name="Latitude" id="Latitude" value="'+window.mylat+'"/>
      <input type="hidden" name="Longitude" id="Longitude"  value="'+window.mylong+'"/>
      <input type="hidden" name="Accuracy" id="Accuracy" value="'+window.myacc+'"/>


      <p>Antal :<br>
        <input type="number" name="Number" min="0" max="500" /></p>
      <br>
      <p>Höjd :<br>
        <input type="double" name="Hight" min="0.0" max="50.0" />
      <br><br>
      <input type="submit" value="Skicka" />

    </form>


    <!-- Placeholder map -->
    <div id="map">

    </div>


  </body>
</html>

You can use the jQuery val method to set the values of inputs.您可以使用jQuery val方法来设置输入的值。 In your case, you can set them in the same place where you are setting the display values, like so:在您的情况下,您可以在设置显示值的同一位置设置它们,如下所示:

$('#Latitude').val(mylat);
$('#Longitude').val(mylong);
$('#Accuracy').val(myacc);

Use following code in assigning value.在赋值时使用以下代码。 I am using input type 'name' instead of 'id'我正在使用输入类型 'name' 而不是 'id'

document.forms['form']['Latitude'].value=mylat; 
document.forms['form']['Longitude'].value=mylong; 
document.forms['form']['Accuracy'].value=myacc;

Instead of代替

$('#lat').html(mylat);
$('#long').html(mylong);
$('#acc').html(myacc);

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM