title: Problem with sending client side data to server side (django)
body: <p>I am trying to send client side data(html5 api for latitude and longitude) to server side. I am not familiar with JS but i found the code for two JS functions for latitude and longtitude:</p>
  
  <pre><code>function latitude() {
      if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(function (position) {
              return document.getElementById('latitude').setAttribute("value", position.coords.latitude);
          }
          );
      }
      else {
          alert("Sorry, your browser does not support HTML5 geolocation.");
      }
  }
  function longitude() {
      if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(function (position) {
              return document.getElementById('longitude').setAttribute("value", position.coords.longitude);
          }
          );
      }
      else {
          alert("Sorry, your browser does not support HTML5 geolocation.");
      }
  }
  </code></pre>
  
  <p>Then I created django form which will receive the data:</p>
  
  <pre><code>
  class CordsForm(forms.Form):
      latitude = forms.CharField(widget=forms.TextInput(
          attrs={'id': 'latitude', 'type': 'hidden'}))
      longitude = forms.CharField(widget=forms.TextInput(
          attrs={'id': 'longitude', 'type': 'hidden'}))
  </code></pre>
  
  <p>Also i created view which uses the form:</p>
  
  <pre><code>def index(request):
      if request.method == 'POST':
          cords_form = CordsForm(request.POST)
          if cords_form.is_valid():
              latitude = cords_form.cleaned_data['latitude']
              longitude = cords_form.cleaned_data['longitude']
              print(longitude) # only for testing
              print(latitude) # only for testing
      else:
          cords_form = CordsForm()
      return render(request, 'weather/index.html', {'form': cords_form})
  </code></pre>
  
  <p>This is the index page:</p>
  
  <pre><code>{% extends 'weather/base.html' %}
  {% block content %}
  &lt;form method="POST" id="geoform" name="geoform"&gt;
      {% csrf_token %}
      {{ form.latitude }}
      &lt;script&gt;latitude();&lt;/script&gt;
      {{ form.longitude }}
      &lt;script&gt;longitude();&lt;/script&gt;
  &lt;/form&gt;
  &lt;script&gt;
      document.addEventListener("DOMContentLoaded", function (event) {
          document.getElementById("geoform").submit();
      });
  &lt;/script&gt;
  {% endblock content %}
  </code></pre>
  
  <p>Every time a user visits the index page, the latitude and longitude is sent automatically via the form, but this code:</p>
  
  <pre><code>&lt;script&gt;
      document.addEventListener("DOMContentLoaded", function (event) {
          document.getElementById("geoform").submit();
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>sends the data but it is refreshing the page like i am spamming the F5 button. How can i send the data only once when the index page is visited?</p>