document.getElementById（）。value在表单的隐藏字段ASP.NET网页中不起作用

Question

I created a simple website using ASP.NET Web Pages (using Razor markup). I have a form with two hidden fields: latitude and longitude . In my JS script I use HTML5 Geolocation API to get user's location expressed in degrees (latitude and longitude) and then try to assign these values to the two hidden fields in the form before sending them out to a server.

The problem is I use getElementById().value method to assign these value and it does not seem to work! I can print out the values in the same place in script using a simple alert() message so I'm pretty sure it's getElementById().value that doesn't work.

Here's code for my form:

<form  id="locationForm" method="post" action="" onsubmit="return getLocation()">
Search for cinema showings in my area<br />
<input type="hidden" name="latitude" id="latitude" value="" />
<input type="hidden" name="longitude" id="longitude" value=""/>
<input type="submit" value="Submit" class="submit"/>
</form>

And here's code for my script:

<script>
function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    }
    else {
        alert("Geolocation is not supported by this browser.");

    }
}
function showPosition(position) {

    var lat = position.coords.latitude;
    alert("lat is: " + lat);

    document.getElementById('latitude').value = position.coords.latitude;

    document.getElementById("longitude").value = position.coords.longitude;
}

Answer 1

I apologize for my English ... my native language is Portuguese / Brazil.

I have the same problem. I had to check my codes in many browsers and Windows Versions.

document . GetElementById (HIDDENFormVariable) . value = 'string' does NOT run in ...

• IE 11 Windows 7: Does not run
• Mozila Windows 7: Does not run
• Chrome 37.0.2062.124 Vista Business: Does not run
• Chrome 38.0.2125 Windows 7: Does not run
• Chrome 38.0.2125 Windows XP: Does not run
• IE 9 Windows Vista Business: Does run
• IE 7 Windows XP: Does run

BUT ..

In Windows Explorer 11, if you change in [Tools] > [Compatibility View Settings] and include your site at the list it will run Ok in Windows 7 with IE 11. Then is not a bug, but it was changed by IE. Chrome do not accept the change - hidden input in any of Windows or old version that I have checked.

I SOLVED it from another way

Where I had <input type="HIDDEN">

I changed to

<DIV STYLE="visibility:hidden"> <input type="TEXT"> </DIV>

Text inputs can be changed by javascript and inside the DIV they do not need to be showed on the screen.

Answer 2

The issue is that javascript runs asynchronously. So, the form submission handler will not wait for the geolocation.getCurrentPosition() method to finish and execute it's success callback - where you are assigning the values to input fields. Instead it continues execution ie:

You have specified onsubmit="return getLocation()" in the inline event handler but you're not returning anything - hence the function will return undefined immediately and the <form> is submitted, regardless of the status of geolocation method.

---

You can solve this issue by preventing the form submission using event.preventDefault() and manually submitting the form inside the success callback of getCurrentPosition() as shown below:

HTML:

<form id="locationForm" method="post" action="">Search for cinema showings in my area
    <br />
    <input type="text" name="latitude" id="latitude" value="" />
    <input type="text" name="longitude" id="longitude" value="" />
    <input type="submit" value="Submit" class="submit" />
</form>

JS:

var form = document.getElementById("locationForm");
form.addEventListener("submit", getLocation);

function getLocation(event) {
    event.preventDefault(); // prevent the form submission
    if (navigator.geolocation) 
        navigator.geolocation.getCurrentPosition(success, error);
     else {
        alert("Geolocation is not supported by this browser");
};

function success(position) {
    var lat = position.coords.latitude,
        long = position.coords.longitude;

    alert("lat is: " + lat + "long is: " + long);
    document.getElementById("latitude").value = lat;
    document.getElementById("longitude").value = long;
    form.submit(); // successfully set the values, submitting the form
}

function error(){
    alert("Unable to retrieve you location");
}

Demo

Answer 3

Ok,I solved the problem although it can be considered a bit of a "hack". I created a separate button that call the same getLocation function to change the values of latitude and longitude fields and submit the form using:

document.locationForm.submit();

Then on the load of the page I use jQuery to hide the submit button:

<script>
$(document).ready(function(){
$(".submit").hide();
});
</script>

What I noticed is that the old script did change values of the hidden fields after all, just did not post them to the server. If anyone finds out what caused this to not work is welcome, but for now thanks for all the answers!

Answer 4

If I'm not mistaken, the onsubmit is fired when the form is already being submitted. Try calling the function through the submit button's onclick

Answer 5

OK I tried another approach. Add a name to to your form, like name="geoform"

Now, in the showPosition function, change the last lines to:

document.geoform.latitude.value = position.coords.latitude;
document.geoform.longitude.value = position.coords.longitude;