我正在开发一个天文应用程序，该应用程序可以确定太阳的位置以及一天中不同时间产生的阴影长度和阴影方位角。我希望最终将其部署在手机上，因此我使用 HTML Geolocation API 来获取设备的纬度和经度以及请求位置的时间。 有了这些信息，我计算了太阳的位置以及我对名为 soalrTimeDetails 的函数感兴趣的参数，我已经对其进行了广泛的测试以获得正确的结果 - 这不是问题。
我还希望能够为未来或过去的太阳结果手动选择位置（纬度、经度和日期），因此我还提供了一个表单，让用户可以选择自动确定位置和日期（默认值） ）或通过单选按钮手动。 该表单还有一个日期选择器部分，可以自动（默认）或手动获取日期。该表格还有一些额外的单选按钮来选择我正在寻找的太阳条件。 该表格也可以正常工作。直到我点击三个按钮之一。
我有“保存”、“更新”和“重置”按钮。 重置按钮工作得很好，将表单重置为默认值。 “保存”和“更新”按钮调用函数 ChooseMethod(this.form)，该函数应该将表单数据存储在 localStorage 中，然后确定是自动还是手动获取位置和日期，一旦获取，就调用 SolarTimeDetails() 函数。
这是我的问题。 当我最初加载页面时，它将自动获取位置和日期并显示结果。 但是，如果我随后尝试手动输入表单参数，它会按预期运行，但随后会重新加载并自动运行。 单击“保存”或“更新”按钮后，我不知道如何阻止它自动运行。
这是我的应用程序中与此问题相关的部分
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://use.typekit.net/ihb7rrh.css">
<link rel="stylesheet" href="shadows_test3.css" />
<title>Shadows Test 3</title>
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous">
//$(document).ready(function(){window.onload = dataLoad();});
</script>
<title>Sun Tracker</title>
</head>
<body onload="getLocation()">
<form id="settingsInput" class="dropdown contents" autocomplete="on">
<fieldset class="locfield">
<legend>Location<br></legend>
<input type="radio" name="location" value="auto" id="autoloc" checked><label for="autoloc"> Auto</label><br><hr class="settingsDivider">
<input type="radio" name="location" value="manual" id="manualloc"><label for="manualloc"> Manual</label><br>
Latitude:<br> <input type="number" name="latitude" maxlength="10" class="locinput" style="width:6em"><br>
<input type="radio" name="NS" value="north" id="North"><label for="North"> North</label><br>
<input type="radio" name="NS" value="south" id="South"><label for="South"> South</label><br>
Longitude:<br> <input type="number" name="longitude" class="locinput" style="width:6em"><br>
<input type="radio" name="EW" value="east" id="East"><label for="East"> East</label><br>
<input type="radio" name="EW" value="west" id="West"><label for="West"> West</label><br>
Elevation:<br> <input type="number" name="landelev" class="locinput" style="width:6em"><br>
<input type="radio" name="elevunits" value="feet" id="feet"><label for="feet"> Feet</label><br>
<input type="radio" name="elevunits" value="meters" id="meters"><label for="meters"> Meters</label><br>
Time Zone:<br> <select name="timezones">
<option value="-12">UTC-12</option>
<option value="-11">UTC-11</option>
<option value="-10">UTC-10</option>
<option value="-9">UTC-9</option>
<option value="-8">UTC-8</option>
<option value="-7">UTC-7</option>
<option value="-6">UTC-6</option>
<option value="-5">UTC-5</option>
<option value="-4">UTC-4</option>
<option value="-3">UTC-3</option>
<option value="-2">UTC-2</option>
<option value="-1">UTC-1</option>
<option value="0">UTC+0</option>
<option value="1">UTC+1</option>
<option value="2">UTC+2</option>
<option value="3">UTC+3</option>
<option value="4">UTC+4</option>
<option value="5">UTC+5</option>
<option value="6">UTC+6</option>
<option value="7">UTC+7</option>
<option value="8">UTC+8</option>
<option value="9">UTC+9</option>
<option value="10">UTC+10</option>
<option value="11">UTC+11</option>
<option value="12">UTC+12</option>
</select><br>
<span><label for="Manualdst" style="font-size:15px">Daylight Saving?</label></span><br>
<input type="checkbox" name="ManualDST" value="DST" id="Manualdst">
</fieldset>
<fieldset class="datefield">
<legend>Date</legend>
<input type="radio" name="dateMode" value="auto" id="autodate" checked><label for="autodate"> Auto</label><br><hr class="settingsDivider">
<input type="radio" name="dateMode" value="manual" id="manualdate"><label for="manualdate"> Manual</label><br>
Select Date:<br>
<input type="date" name="dateInput" class="dateinput" style="width:6em"><br><hr class="settingsDivider">
</fieldset>
<fieldset class="eventfield">
<legend>Events</legend>
<!--<span style="text-decoration: underline">Subh Cond:</span><br>-->
<span>Astro Cond:</span><br>
<input type="radio" name="astroMode" value="12" id="astrourban" checked><span><label for="astrourban"> Urban</label></span><br>
<input type="radio" name="astroMode" value="15" id="astrowild"><span style="font-size: 17px"><label for="astrowild"> Wilderness</label></span><br><hr class="settingsDivider">
<span class="noontext">Noon Shadow:</span><br>
<input type="radio" name="noonMode" value="42" id="noonsandal"><span style="font-size: 15px"><label for="noonsandal"> Sandal Strap</label></span><br>
<input type="radio" name="noonMode" value="21" id="noonhand" checked><span style="font-size: 17px"><label for="noonhand"> Hand Span</label></span><br>
<input type="radio" name="noonMode" value="7" id="noonfoot"><span style="font-size: 17px"><label for="noonfoot"> Foot Span</label></span><br><hr class="settingsDivider">
<!--<span style="text-decoration: underline">Asr Shadow:</span><br>-->
<span>Afternoon Shadow:</span><br>
<input type="radio" name="afternoonMode" value="1" id="afternoonmajority" checked><span style="font-size: 20px"><label for="afternoonmajority"> Majority</label></span><br>
<input type="radio" name="afternoonMode" value="2" id="afternoonlong"><span><label for="afternoonlong"> Long</label></span><br><hr class="settingsDivider">
<!--<span style="text-decoration: underline">Isha Cond:</span><br>-->
<span>Night Cond:</span><br>
<input type="radio" name="nightMode" value="12" id="nighturban"><span><label for="nighturban"> Urban</label></span><br>
<input type="radio" name="nightMode" value="15" id="nightwild" checked><span style="font-size: 17px"><label for="nightwild"> Wilderness</label></span><br>
</fieldset>
<div class="set-section">
<button name="solartimes" value=" Save " onclick="chooseMethod(this.form)">Save</button>
</div>
<div class="update-section">
<button name="updatesolartimes" value=" Update " onclick="chooseMethod(this.form)">Update</button>
</div>
<div class="reset-section">
<button type="reset" value=" Reset ">Reset</button>
</div>
</form>
<div>
<!--shows date and location-->
</div>
<div>
<!--shows events and times when they occur-->
</div>
<div>
<!--shows graphic of solar azimuth-->
</div>
<div>
<!--shows graphic of soalr altitude-->
</div>
<script>
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(savePosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
} //end of getLocation()
function savePosition(position) {
var latitude = position.coords.latitude.toFixed(4).valueOf();
var longitude = (position.coords.longitude.toFixed(4) * -1.0).valueOf();
var locElev = (position.coords.altitude * 3.2808).toFixed(0).valueOf();
var currentDate = new Date(position.timestamp);
var currentMinutes = Number(currentDate.getHours()) * 60 + Number(currentDate.getMinutes());
if(localStorage.getItem("settingsObject") !== null)
{
var inputParse = JSON.parse(localStorage.getItem("settingsObject"));
}
if (typeof(Storage) !== "undefined")
{
var formData = CacheData();
}
else
{
document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Storage...";
}
var sDelta = Number(inputParse.astroMode);
var dDelta = Number(inputParse.noonMode);
var aDelta = Number(inputParse.afternoonMode);
var iDelta = Number(inputParse.nightMode);
var dateCheck = inputParse.dateMode;
alert("in savePosition");
alert(sDelta);
alert(dDelta);
alert(aDelta);
alert(iDelta);
alert(dateCheck);
document.getElementById("data25").innerHTML = latitude;
document.getElementById("data26").innerHTML = longitude;
document.getElementById("data28").innerHTML = locElev;
if (latitude > 0)
{
var NSlat = "N";
}
else if (latitude < 0)
{
NSlat = "S";
}
else
{
NSlat = "EQ"
}
if (longitude < 0)
{
var EWlong = "E";
}
else if (longitude > 0)
{
EWlong = "W";
}
else
{
EWlong = "PM"
}
document.getElementById("data36").innerHTML = NSlat;
document.getElementById("data37").innerHTML = EWlong;
if (dateCheck == "auto")
{
var dateData = new Date();
year = dateData.getFullYear();
month = dateData.getMonth() + 1;
day = dateData.getDate();
var zoneMinutes = dateData.getTimezoneOffset();
var timezone = zoneMinutes / 60;
timezone = -1.0 * timezone;
alert(currentMinutes);
}
else if (dateCheck == "manual")
{
alert(inputParse.dateInput);
var dateData = new Date(inputParse.dateInput);
dateData = new Date(
dateData.getUTCFullYear(),
dateData.getUTCMonth(),
dateData.getUTCDate(),
dateData.getUTCHours(),
dateData.getUTCMinutes(),
dateData.getUTCSeconds(),
dateData.getUTCMilliseconds());
alert(dateData);
year = dateData.getFullYear();
//month = dateData.getMonth() + 1;
//day = dateData.getDate() + 1;
alert(currentMinutes);
if (month == 10 || month == 8 || month == 7 || month == 5 || month == 3 || month == 1)
{
if (day > 31)
{
month = month + 1;
day = 1;
}
}
if (month == 12)
{
if (day > 31)
{
month = 1;
day = 1;
}
}
if (month == 11 || month == 9 || month == 6 || month == 4)
{
if (day > 30)
{
month = month + 1;
day = 1;
}
}
if (month == 2)
{
if (isLeapYear(year))
{
if (day > 29)
{
month = 3;
day = 1;
}
}
else
{
if (day > 28)
{
month = 3;
day = 1;
}
}
}
var timezoneIndex;
var daylightSaving;
var timezone = 0;
var zoneMinutes = dateData.getTimezoneOffset();
var zone = zoneMinutes / 60;
var timezone = -1.0 * zone;
}
document.getElementById("data27y").innerHTML = year;
document.getElementById("data27m").innerHTML = month;
document.getElementById("data27d").innerHTML = day;
solarTimeDetails = calcSolarTimes(latitude, longitude, locElev, day, month, year, timezone, dDelta, aDelta, sDelta, iDelta);
document.getElementById("data35").innerHTML = MilToAmPm(timeToMinutes(solarTimeDetails[35]));
document.getElementById("data3").innerHTML = MilToAmPm(timeToMinutes(solarTimeDetails[2]));
document.getElementById("data4").innerHTML = MilToAmPm(timeToMinutes(solarTimeDetails[3]));
document.getElementById("data6").innerHTML = MilToAmPm(timeToMinutes(solarTimeDetails[5]));
document.getElementById("data12").innerHTML = MilToAmPm(timeToMinutes(solarTimeDetails[11]));
document.getElementById("data16").innerHTML = MilToAmPm(timeToMinutes(solarTimeDetails[15]));
document.getElementById("data20").innerHTML = MilToAmPm(timeToMinutes(solarTimeDetails[19]));
document.getElementById("data21").innerHTML = MilToAmPm(timeToMinutes(solarTimeDetails[20]));
localStorage.setItem("elevation", solarTimeDetails[36]);
localStorage.setItem("shadowAzimuth", solarTimeDetails[37]);
localStorage.setItem("latitude", latitude);
localStorage.setItem("longitude", longitude);
localStorage.setItem("currentTime", currentMinutes);
localStorage.setItem("astroTime", timeToMinutes(solarTimeDetails[3]));
localStorage.setItem("sunriseTime", timeToMinutes(solarTimeDetails[5]));
localStorage.setItem("noonTime", timeToMinutes(solarTimeDetails[11]));
localStorage.setItem("afternoonTime", timeToMinutes(solarTimeDetails[15]));
localStorage.setItem("sunsetTime", timeToMinutes(solarTimeDetails[19]));
localStorage.setItem("nightTime", timeToMinutes(solarTimeDetails[20]));
localStorage.setItem("morningTime", timeToMinutes(solarTimeDetails[39]));
localStorage.setItem("transitTime", solarTimeDetails[38]);
localStorage.setItem("transitElev", solarTimeDetails[40]);
localStorage.setItem("currentMinutes", currentMinutes);
var SunAltitude = [];
SunAltitude = localStorage.getItem("elevation").split(",");
document.getElementById("currentAlt").innerHTML = Number(SunAltitude[currentMinutes]).toFixed(1);
alert("end savePosition");
}
function chooseMethod(form)
{
alert("in chooseMethod");
var timezoneIndex;
var daylightSaving;
var timezone = 0;
if(localStorage.getItem("settingsObject") !== null)
{
var inputParse = JSON.parse(localStorage.getItem("settingsObject"));
}
if (typeof(Storage) !== "undefined")
{
var formData = CacheData();
}
else
{
document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Storage...";
}
var coordinates = "";
for (i = 0; i < 3; i++)
{
if (form.location[i].checked)
{
coordinates = form.location[i].value;
}
}
var dateCheck = "";
for (i = 0; i < 2; i++)
{
if (form.dateMode[i].checked)
{
dateCheck = form.dateMode[i].value;
}
}
var dDelta;
for (i = 0; i < 3; i++)
{
if (form.dhuhurMode[i].checked)
{
dDelta = Number(form.dhuhurMode[i].value);
}
}
var aDelta;
for (i = 0; i < 2; i++)
{
if (form.asrMode[i].checked)
{
aDelta = Number(form.asrMode[i].value);
}
}
var sDelta;
for (i = 0; i < 2; i++)
{
if (form.subhMode[i].checked)
{
sDelta = Number(form.subhMode[i].value);
}
}
var iDelta;
for (i = 0; i < 2; i++)
{
if (form.ishaMode[i].checked)
{
iDelta = Number(form.ishaMode[i].value);
}
}
if(coordinates == "auto")
{
alert("chooseMethod auto going into geoLocation");
getLocation();
}
else if (coordinates == "manual")
{
alert("chooseMethod manual");
var latitude = form.latitude.value;
var longitude = form.longitude.value;
var NSlat;
for (i = 0; i < 2; i++)
{
if (form.NS[i].checked)
{
NSlat = form.NS[i].value;
}
}
if (NSlat == "south")
{
latitude = -1.0 * latitude;
}
var EWlong;
for (i = 0; i < 2; i++)
{
if (form.EW[i].checked)
{
EWlong = form.EW[i].value;
}
}
if (EWlong == "east")
{
longitude = -1.0 * longitude;
}
var locElev = form.landelev.value * 1.0000;
var elevUnits;
for (i = 0; i < 2; i++)
{
if (form.elevunits[i].checked)
{
elevUnits = form.elevunits[i].value;
}
}
if (elevUnits == "meters")
{
locElev = locElev * 3.2808;
}
if (Math.abs(latitude) > 48.5)
{
if(latitude > 0)
{
latitude = 48.5000;
}
else
{
latitude = -48.5000;
}
}
document.getElementById("data25").innerHTML = latitude;
document.getElementById("data26").innerHTML = longitude;
document.getElementById("data28").innerHTML = locElev;
if (latitude > 0)
{
var NSlat = "N";
}
else if (latitude < 0)
{
NSlat = "S";
}
else
{
NSlat = "EQ"
}
if (longitude < 0)
{
var EWlong = "E";
}
else if (longitude > 0)
{
EWlong = "W";
}
else
{
EWlong = "PM"
}
document.getElementById("data36").innerHTML = NSlat;
document.getElementById("data37").innerHTML = EWlong;
var day;
var month;
var year;
if (dateCheck == "auto")
{
alert("chooseMethod manual auto Date");
var dateData = new Date();
year = dateData.getFullYear();
month = dateData.getMonth() + 1;
day = dateData.getDate();
timezoneIndex = form.timezones.selectedIndex;
timezone = form.timezones.options[timezoneIndex].value;
if (form.ManualDST.checked)
{
timezone = Number(timezone) + 1.0;
}
else
{
timezone = timezone;
}
}
else
{
alert("chooseMethod manual manual Date");
var dateData = new Date(form.dateInput.value);
year = dateData.getFullYear();
month = dateData.getMonth() + 1;
day = dateData.getDate() + 1;
if (month == 10 || month == 8 || month == 7 || month == 5 || month == 3 || month == 1)
{
if (day > 31)
{
month = month + 1;
day = 1;
}
}
if (month == 12)
{
if (day > 31)
{
month = 1;
day = 1;
}
}
if (month == 11 || month == 9 || month == 6 || month == 4)
{
if (day > 30)
{
month = month + 1;
day = 1;
}
}
if (month == 2)
{
if (isLeapYear(year))
{
if (day > 29)
{
month = 3;
day = 1;
}
}
else
{
if (day > 28)
{
month = 3;
day = 1;
}
}
}
document.getElementById("data27y").innerHTML = year;
document.getElementById("data27m").innerHTML = month;
document.getElementById("data27d").innerHTML = day;
timezoneIndex = form.timezones.selectedIndex;
timezone = form.timezones.options[timezoneIndex].value;
if (form.ManualDST.checked)
{
timezone = Number(timezone) + 1.0;
}
else
{
timezone = timezone;
}
}
var dDelta = 21;
for (i = 0; i < 3; i++)
{
if (form.noonMode[i].checked)
{
dDelta = Number(form.noonMode[i].value);
}
}
var aDelta = 1;
for (i = 0; i < 2; i++)
{
if (form.afternoonMode[i].checked)
{
aDelta = Number(form.afternoonMode[i].value);
}
}
var sDelta = 12;
for (i = 0; i < 2; i++)
{
if (form.astroMode[i].checked)
{
sDelta = Number(form.astroMode[i].value);
}
}
var iDelta = 15;
for (i = 0; i < 2; i++)
{
if (form.nightMode[i].checked)
{
iDelta = Number(form.nightMode[i].value);
}
}
solarTimeDetails = calcSolarTimes(latitude, longitude, locElev, day, month, year, timezone, dDelta, aDelta, sDelta, iDelta);
document.getElementById("data35").innerHTML = MilToAmPm(timeToMinutes(solarTimeDetails[35]));
document.getElementById("data3").innerHTML = MilToAmPm(timeToMinutes(solarTimeDetails[2]));
document.getElementById("data4").innerHTML = MilToAmPm(timeToMinutes(solarTimeDetails[3]));
document.getElementById("data6").innerHTML = MilToAmPm(timeToMinutes(solarTimeDetails[5]));
document.getElementById("data12").innerHTML = MilToAmPm(timeToMinutes(solarTimeDetails[11]));
document.getElementById("data16").innerHTML = MilToAmPm(timeToMinutes(solarTimeDetails[15]));
document.getElementById("data20").innerHTML = MilToAmPm(timeToMinutes(solarTimeDetails[19]));
document.getElementById("data21").innerHTML = MilToAmPm(timeToMinutes(solarTimeDetails[20]));
localStorage.setItem("elevation", solarTimeDetails[36]);
localStorage.setItem("shadowAzimuth", solarTimeDetails[37]);
localStorage.setItem("latitude", latitude);
localStorage.setItem("longitude", longitude);
localStorage.setItem("currentTime", currentMinutes);
localStorage.setItem("astroTime", timeToMinutes(solarTimeDetails[3]));
localStorage.setItem("sunriseTime", timeToMinutes(solarTimeDetails[5]));
localStorage.setItem("noonTime", timeToMinutes(solarTimeDetails[11]));
localStorage.setItem("afternoonTime", timeToMinutes(solarTimeDetails[15]));
localStorage.setItem("sunsetTime", timeToMinutes(solarTimeDetails[19]));
localStorage.setItem("nightTime", timeToMinutes(solarTimeDetails[20]));
localStorage.setItem("morningTime", timeToMinutes(solarTimeDetails[39]));
localStorage.setItem("transitTime", solarTimeDetails[38]);
localStorage.setItem("transitElev", solarTimeDetails[40]);
localStorage.setItem("currentMinutes", currentMinutes);
var SunAltitude = [];
SunAltitude = localStorage.getItem("elevation").split(",");
document.getElementById("currentAlt").innerHTML = Number(SunAltitude[currentMinutes]).toFixed(1);
} //end of manual
} //end of chooseMethod
//loading saved form data into form
function dataLoad()
{
if (typeof(Storage) !== "undefined")
{
if (localStorage.getItem('settingsObject') !== null)
{
alert("in dataLoad");
var inputParse = JSON.parse(localStorage.getItem('settingsObject'));
$.each(inputParse, function(key, value) {
var field = document.querySelector("[name=" + key + "]");
if (field.type == 'radio' || field.type == 'checkbox') {
field.checked = field.value == value;
} else {
field.value = value;
}
});
}
}
else
{
document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Storage...";
}
} //end of dataLoad
// Saving data from form
function CacheData()
{
if (typeof(Storage) !== "undefined")
{
jQuery.fn.serializeObject = function() {
var formData = {};
var formArray = this.serializeArray();
for (var i = 0, n = formArray.length; i < n; ++i)
formData[formArray[i].name] = formArray[i].value;
return formData;
};
var formObject = $('#settingsInput').serializeObject();
localStorage.setItem('settingsObject', JSON.stringify(formObject));
return JSON.stringify(formObject);
}
else
{
document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Storage...";
}
} //end of CacheData
</script>
</body>
</html>
我在 stackoverflow 上搜索了很多解决方案，但找不到有帮助的解决方案。
我厌倦了使用 onSubmit="return false;"在表单标签中，但是手动选择不会被使用。
我也尝试过使用 onpageopen 而不是 onload，但这也没有帮助。
您需要监听
submitform您可以使用
addEventListener('submit')onsubmit请参阅下面的示例。
function printName() {
const name = document.querySelector('input[name="name"]').value
console.log(name)
}
function printAge() {
const age = document.querySelector('input[name="age"]').value
console.log(age)
}
function handleSubmit(event) {
console.log('preventing form submit')
event.preventDefault()
}<form onsubmit="handleSubmit(event)">
<label>Name: <input type="text" name="name" placeholder="name"></label>
<label>Age: <input type="text" name="age" placeholder="age"></label>
<button onclick="printName()">Print Name</button>
<button onclick="printAge()">Print Age</button>
</form>