aravind/glink-website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fixed mandatory radius field if geo-restricted is checked

Browse Source
This commit is contained in:
Aravind142857
2023-06-12 20:55:00 -05:00
parent 2747fd5b76
commit cd0b04b488
3 changed files with 51 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
public/index.html
View File

@@ -15,8 +15,21 @@
<span role="alert" id="error" aria-hidden="true">Invalid entry</span>
<br><br>
<label for="restricted">Geo-restricted?: </label><input type="checkbox" name="restricted" id="restricted">
<br><br>
<label for="radiusSelect" hidden="hidden" id="radiusLabel">Radius: </label><span id="mandatory-radius"class="mandatory" hidden="hidden">*</span>
<select name="radiusSelect" id="radiusSelect" hidden="hidden" required>
<option value="" selected disabled hidden>Choose a radius for your geo link</option>
<option value="5">5 mi</option>
<option value="10">10 mi</option>
<option value="15">15 mi</option>
<option value="20">20 mi</option>
</select>
<br><br>
<input type="submit" id="button" value="Zip It!">
<input type="hidden" name="latitude" id="latitude">
<input type="hidden" name="longitude" id="longitude">
</form>
<hr>
<div>

37
public/src/index.js
View File

@@ -1,5 +1,42 @@
// const submit = document.getElementById("button");
mycheckbox = document.getElementById("restricted");
mycheckbox.addEventListener('change',checkboxCallback);
function checkboxCallback(event) {
const radiusLabel = document.getElementById("radiusLabel");
const radiusSelect = document.getElementById("radiusSelect");
const mandatoryRadius = document.getElementById("mandatory-radius");
if (event.currentTarget.checked) {
radiusLabel.hidden = false;
mandatoryRadius.hidden = false;
radiusSelect.hidden = false;
//radiusSelect.required = true;
getLocation();
} else {
radiusLabel.hidden = true;
mandatoryRadius.hidden = true;
radiusSelect.hidden = true;
//radiusSelect.required = false;
}
}
function getLocation() {
console.log("GeoLocation");
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
console.log("Your browser does not support geolocation.");
}
}
function showPosition(position) {
console.log(position.coords.latitude);
console.log(position.coords.longitude);
document.getElementById("latitude").value = position.coords.latitude;
document.getElementById("longitude").value = position.coords.longitude;
console.log("done");
}
// submit.addEventListener('click', validate);
function validate() {