Question

我有一个表单，我想让用户手动输入lat和long坐标来查看点之间的距离。当按下提交按钮时，如何将输入字段绑定到我的javascript？

我的代码

var Rm = 3961;
var Rk = 6373;
                
function findDistance(frm) {                    
 var t1, n1, t2, n2, lat1, lon1, lat2, lon2, dlat, dlon, a, c, dm, dk, mi, km;
                
                // get values for lat1, lon1, lat2, and lon2
                //t1 = frm.lat1.value;
                //n1 = frm.lon1.value;
                //t2 = frm.lat2.value;
                //n2 = frm.lon2.value;
                t1 = document.getElementById('lat1').value;
                n1 = document.getElementById('lon1').value;
                t2 = document.getElementById('lat2').value;
                n2 = document.getElementById('lon2').value;
          
                
                // convert coordinates to radians
                lat1 = deg2rad(t1);
                lon1 = deg2rad(n1);
                lat2 = deg2rad(t2);
                lon2 = deg2rad(n2);
                
                // find the differences between the coordinates
                dlat = lat2 - lat1;
                dlon = lon2 - lon1;
                
                // here's the heavy lifting
                a  = Math.pow(Math.sin(dlat/2),2) + Math.cos(lat1) * Math.cos(lat2) * Math.pow(Math.sin(dlon/2),2);
                c  = 2 * Math.atan2(Math.sqrt(a),Math.sqrt(1-a)); // great circle distance in radians
                dm = c * Rm; // great circle distance in miles
                dk = c * Rk; // great circle distance in km
                
                // round the results down to the nearest 1/1000
                mi = round(dm);
                km = round(dk);
                
                // display the result
                frm.mi.value = mi;
                frm.km.value = km;                    
                console.log(mi + 'miles');
                console.log(km + 'km');
                $('#calculated').html(mi + 'miles');
}


// convert degrees to radians
function deg2rad(deg) {
                rad = deg * Math.PI/180; // radians = degrees * pi/180
                return rad;
}


// round to the nearest 1/1000
function round(x) {
                return Math.round( x * 1000) / 1000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="frm">
  <input type="text" id="lat1" name="lat1"  />
  <input type="text" id="lon1" name="lon1" />                
  <input type="text" id="lat2" name="lat2" />
  <input type="text" id="lon2" name="lon2" /> 
  <input type="submit" name="submit" value="Calculate" onclick="findDistance()" />
</form>
<div id="calculated">Results...</div>

Answer 1

将您的HTML更改为此（添加return）：

<input type="submit" name="submit" value="Calculate" onclick="return findDistance()" />

然后，在您的findDistance()函数中，返回底部的false。这样可以防止表单实际提交

您还可以删除<form>和</form>代码。或者将按钮更改为不是类型submit

Answer 2

$form=document.getElementById('frm');

$form.addEventListener('submit',function(e){
    e.preventDefault();
    findDistance();
});

有各种不同的方法，但是这种方法可以让您获取表单的子项并将其发送到您的findDistance()函数。这意味着您可以在页面上拥有多个表单。您还可以包括旧浏览器的覆盖范围，例如：

if($form.addEventListener){
    $form.addEventListener('submit',function('some object you\'re sending')});
}else{
    $form.attachEvent('onSubmit',findDistance('some object you\'re sending'));
}

也不要忘记传递参数。

Answer 3

如果您将type =“submit”更改为type =“button”，则问题几乎已解决。

我看到你只在1行使用jQuery;我用非jQuery javascript替换了那一行。无论如何，请随意使用jQuery。

这有效：

<form id="frm">
  <input type="text" id="lat1" name="lat1" value="50.84684892257945"/>
  <input type="text" id="lon1" name="lon1" value="4.3524657636880715"/>                
  <input type="text" id="lat2" name="lat2" value="48.86109400096986"/>
  <input type="text" id="lon2" name="lon2" value="2.3359246999025185"/> 
  <input type="button" value="Calculate" onclick="findDistance()" />
</form>
<div id="calculated">Results...</div>
<script>
var Rm = 3961;
var Rk = 6373;

function findDistance(frm) {
  var t1, n1, t2, n2, lat1, lon1, lat2, lon2, dlat, dlon, a, c, dm, dk, mi, km;

  t1 = document.getElementById('lat1').value;
  n1 = document.getElementById('lon1').value;
  t2 = document.getElementById('lat2').value;
  n2 = document.getElementById('lon2').value;

  // convert coordinates to radians
  lat1 = deg2rad(t1);
  lon1 = deg2rad(n1);
  lat2 = deg2rad(t2);
  lon2 = deg2rad(n2);

  // find the differences between the coordinates
  dlat = lat2 - lat1;
  dlon = lon2 - lon1;

  // here's the heavy lifting
  a  = Math.pow(Math.sin(dlat/2),2) + Math.cos(lat1) * Math.cos(lat2) * Math.pow(Math.sin(dlon/2),2);
  c  = 2 * Math.atan2(Math.sqrt(a),Math.sqrt(1-a)); // great circle distance in radians
  dm = c * Rm; // great circle distance in miles
  dk = c * Rk; // great circle distance in km

  // round the results down to the nearest 1/1000
  mi = round(dm);
  km = round(dk);

  console.log(mi + 'miles');
  console.log(km + 'km');
  //$('#calculated').html(mi + 'miles');
  document.getElementById('calculated').innerHTML = mi + ' miles';
}

// convert degrees to radians
function deg2rad(deg) {
  rad = deg * Math.PI/180; // radians = degrees * pi/180
  return rad;
}

// round to the nearest 1/1000
function round(x) {
  return Math.round( x * 1000) / 1000;
}
</script>

距离计算器Lat和Long

3 个答案: