JavaScript VAR aus Formular Textfeld

Question

Ich habe ein Skript gefunden, das Northings und Eastings in Längen- und Breitengrad konvertiert, derzeit sind die Northings und Eastings Variablen (N & E) hart in das Skript codiert. Ich möchte, dass sie aus zwei Textfeldern kommen.

Momentan findet diese Konvertierung statt, wenn die Seite geladen wird. Ideal wäre es, wenn Northings und Eastings eingegeben werden, konvertiert sie den Längengrad und den Breitengrad in separate Textboxen, die in eine Datenbank hochgeladen werden können.

Vielen Dank im Voraus, jede Hilfe wäre willkommen, da Javascript nicht meine Stärke ist.

http://jsfiddle.net/De6HP/7/

// Original by Chris Veness http://www.movable-type.co.uk/scripts/latlong-gridref.html 
Number.prototype.toRad = function() { 
    return this * Math.PI/180; 
} 

Number.prototype.toDeg = function() { 
    return this * 180/Math.PI; 
} 

var E = 657177 
var N = 172273 

var a = 6377563.396, b = 6356256.909;    // Airy 1830 major & minor semi-axes 
var F0 = 0.9996012717;        // NatGrid scale factor on central meridian 
var lat0 = 49*Math.PI/180, lon0 = -2*Math.PI/180; // NatGrid true origin 
var N0 = -100000, E0 = 400000;      // northing & easting of true origin, metres 
var e2 = 1 - (b*b)/(a*a);       // eccentricity squared 
var n = (a-b)/(a+b), n2 = n*n, n3 = n*n*n; 

var lat=lat0, M=0; 
do { 
    lat = (N-N0-M)/(a*F0) + lat; 

    var Ma = (1 + n + (5/4)*n2 + (5/4)*n3) * (lat-lat0); 
    var Mb = (3*n + 3*n*n + (21/8)*n3) * Math.sin(lat-lat0) * Math.cos(lat+lat0); 
    var Mc = ((15/8)*n2 + (15/8)*n3) * Math.sin(2*(lat-lat0)) * Math.cos(2*(lat+lat0)); 
    var Md = (35/24)*n3 * Math.sin(3*(lat-lat0)) * Math.cos(3*(lat+lat0)); 
    M = b * F0 * (Ma - Mb + Mc - Md);    // meridional arc 

} while (N-N0-M >= 0.00001); // ie until < 0.01mm 

var cosLat = Math.cos(lat), sinLat = Math.sin(lat); 
var nu = a*F0/Math.sqrt(1-e2*sinLat*sinLat);    // transverse radius of curvature 
var rho = a*F0*(1-e2)/Math.pow(1-e2*sinLat*sinLat, 1.5); // meridional radius of curvature 
var eta2 = nu/rho-1; 

var tanLat = Math.tan(lat); 
var tan2lat = tanLat*tanLat, tan4lat = tan2lat*tan2lat, tan6lat = tan4lat*tan2lat; 
var secLat = 1/cosLat; 
var nu3 = nu*nu*nu, nu5 = nu3*nu*nu, nu7 = nu5*nu*nu; 
var VII = tanLat/(2*rho*nu); 
var VIII = tanLat/(24*rho*nu3)*(5+3*tan2lat+eta2-9*tan2lat*eta2); 
var IX = tanLat/(720*rho*nu5)*(61+90*tan2lat+45*tan4lat); 
var X = secLat/nu; 
var XI = secLat/(6*nu3)*(nu/rho+2*tan2lat); 
var XII = secLat/(120*nu5)*(5+28*tan2lat+24*tan4lat); 
var XIIA = secLat/(5040*nu7)*(61+662*tan2lat+1320*tan4lat+720*tan6lat); 

var dE = (E-E0), dE2 = dE*dE, dE3 = dE2*dE, dE4 = dE2*dE2, dE5 = dE3*dE2, dE6 = dE4*dE2, dE7 = dE5*dE2; 
lat = lat - VII*dE2 + VIII*dE4 - IX*dE6; 
var lon = lon0 + X*dE - XI*dE3 + XII*dE5 - XIIA*dE7; 

Math.PI/180 

window.onclick = function() { 
    document.getElementById('result').innerHTML = 'longditude: ' + lon.toDeg(); 
    document.getElementById('result1').innerHTML = 'Latitude: ' + lat.toDeg(); 
} 

Answer 1

Sie auf dem richtigen Weg ist, von Ereignis-Listener Textfelder auf dem blur Ereignis hinzufügen, können Sie es berechnet automatisch die lat/lang, wenn sie korrekt aktualisiert ist. Ihr lat/long-Code ist ein bisschen chaotisch, also habe ich dort nicht viel geändert, ich habe ihn nur in eine Funktion mit zwei Eingängen gepackt.

Was Sie sehen, habe ich in meinem Code in der Spitze hinzufügen die Ereignislistener für blur, die validateInputs() aufrufen, um sicherzustellen, dass Sie zwei gültige Eingaben in den Textfeldern haben, die den Bereich aktualisieren.

document.getElementById('txtInputN').addEventListener('blur', validateInputs); 
 
document.getElementById('txtInputE').addEventListener('blur', validateInputs); 
 

 
function validateInputs() { 
 
    const valN = document.getElementById('txtInputN').value; 
 
    const valE = document.getElementById('txtInputE').value; 
 

 
    document.getElementById('result').innerHTML = ''; //Clear the textbox since we might not have valid input 
 

 
    if (valN && valE) { //Make sure we have values 
 
    if (valN >= 0 && valE >= 0) { //Due to implicit conversions, if it's text this won't pass 
 
     calcResult(valN, valN) //We have valid inputs, so pass them here. 
 
    } 
 
    } 
 
} 
 

 
// Original by Chris Veness http://www.movable-type.co.uk/scripts/latlong-gridref.html 
 
Number.prototype.toRad = function() { 
 
    return this * Math.PI/180; 
 
} 
 

 
function calcResult(inputN, inputE) { 
 

 
    Number.prototype.toDeg = function() { 
 
    return this * 180/Math.PI; 
 
    } 
 

 
    var E = 657177 
 
    var N = 172273 
 

 
    var a = 6377563.396, 
 
    b = 6356256.909; // Airy 1830 major & minor semi-axes 
 
    var F0 = 0.9996012717; // NatGrid scale factor on central meridian 
 
    var lat0 = 49 * Math.PI/180, 
 
    lon0 = -2 * Math.PI/180; // NatGrid true origin 
 
    var N0 = -100000, 
 
    E0 = 400000; // northing & easting of true origin, metres 
 
    var e2 = 1 - (b * b)/(a * a); // eccentricity squared 
 
    var n = (a - b)/(a + b), 
 
    n2 = n * n, 
 
    n3 = n * n * n; 
 

 
    var lat = lat0, 
 
    M = 0; 
 
    do { 
 
    lat = (N - N0 - M)/(a * F0) + lat; 
 

 
    var Ma = (1 + n + (5/4) * n2 + (5/4) * n3) * (lat - lat0); 
 
    var Mb = (3 * n + 3 * n * n + (21/8) * n3) * Math.sin(lat - lat0) * Math.cos(lat + lat0); 
 
    var Mc = ((15/8) * n2 + (15/8) * n3) * Math.sin(2 * (lat - lat0)) * Math.cos(2 * (lat + lat0)); 
 
    var Md = (35/24) * n3 * Math.sin(3 * (lat - lat0)) * Math.cos(3 * (lat + lat0)); 
 
    M = b * F0 * (Ma - Mb + Mc - Md); // meridional arc 
 

 
    } while (N - N0 - M >= 0.00001); // ie until < 0.01mm 
 

 
    var cosLat = Math.cos(lat), 
 
    sinLat = Math.sin(lat); 
 
    var nu = a * F0/Math.sqrt(1 - e2 * sinLat * sinLat); // transverse radius of curvature 
 
    var rho = a * F0 * (1 - e2)/Math.pow(1 - e2 * sinLat * sinLat, 1.5); // meridional radius of curvature 
 
    var eta2 = nu/rho - 1; 
 

 
    var tanLat = Math.tan(lat); 
 
    var tan2lat = tanLat * tanLat, 
 
    tan4lat = tan2lat * tan2lat, 
 
    tan6lat = tan4lat * tan2lat; 
 
    var secLat = 1/cosLat; 
 
    var nu3 = nu * nu * nu, 
 
    nu5 = nu3 * nu * nu, 
 
    nu7 = nu5 * nu * nu; 
 
    var VII = tanLat/(2 * rho * nu); 
 
    var VIII = tanLat/(24 * rho * nu3) * (5 + 3 * tan2lat + eta2 - 9 * tan2lat * eta2); 
 
    var IX = tanLat/(720 * rho * nu5) * (61 + 90 * tan2lat + 45 * tan4lat); 
 
    var X = secLat/nu; 
 
    var XI = secLat/(6 * nu3) * (nu/rho + 2 * tan2lat); 
 
    var XII = secLat/(120 * nu5) * (5 + 28 * tan2lat + 24 * tan4lat); 
 
    var XIIA = secLat/(5040 * nu7) * (61 + 662 * tan2lat + 1320 * tan4lat + 720 * tan6lat); 
 

 
    var dE = (E - E0), 
 
    dE2 = dE * dE, 
 
    dE3 = dE2 * dE, 
 
    dE4 = dE2 * dE2, 
 
    dE5 = dE3 * dE2, 
 
    dE6 = dE4 * dE2, 
 
    dE7 = dE5 * dE2; 
 
    lat = lat - VII * dE2 + VIII * dE4 - IX * dE6; 
 
    var lon = lon0 + X * dE - XI * dE3 + XII * dE5 - XIIA * dE7; 
 

 
    Math.PI/180 
 
    document.getElementById('result').innerHTML = 'Latitude: ' + lat.toDeg() + '<br /> Longitude: ' + lon.toDeg(); 
 
}

Result is: 
 
<div id="result"></div> 
 
<br /> 
 
<span>N: </span> 
 
<input type="text" id="txtInputN" /> 
 
<br /> 
 
<span>E: </span> 
 
<input type="text" id="txtInputE" />

Answer 2

Etwas mit zu beginnen.

<div> 
    Northings: 
    <input id="north" type="text" onblur="Calculate()" /> 
    Eastings: 
    <input id="east" type="text" onblur="Calculate()" /> 
</div> 
<br/> 
Result is: 
<div id="longditude"></div> 
<div id="latitude"></div> 

http://jsfiddle.net/ptm1umad/