How to make all other function stops till user allow or block the navigator.geolocation in Jquery?

Question

I am making the sign_up form in which user first let us know is location then fills up the other field of the form .

But the difficulty is coming that is when the message came that the website want to know the location allow or block . Other function still works . I want that user cannot fill up the form and click anywhere else until he/she choose whether allow or block . But in my code , user can do anything without choosing anything .

My jquery for location is like this but the function works different .

$(document).ready(function() {

  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(successFunction, errorFunction);
  }

  //Get the latitude and the longitude;
  function successFunction(position) {
    var lat = position.coords.latitude;
    var lng = position.coords.longitude;
  }

  function errorFunction() {
    alert("You have blocked us to know your location . You can't be a journalist without that ...");
    window.location.href = 'index.php';
  }

  $(".input").change(function() {
    log(this);
  });

  function log(element) {
    var text = element.val();
    console.log(text);
  }

  $('.button_sign').click(function() {
    log(this);
    log('.input');
    alert(lat);
    alert(lng);
  });

});

My html looks like

<form>
          <div class="field">
            <input type="text" class="input" id="name_register" placeholder="Name">
            <div id="name_error" class="error_field"></div>
          </div>
          <div class="field">
            <input type="email" class="input" id="email_register" placeholder="Email">
            <div id="email_error" class="error_field"></div>
          </div>
          <div class="field">
            <input type="password" class="input" id="password_register" placeholder="Password">
            <div id="pass_error" class="error_field"></div>
          </div>
          <div class="field">
            <input type="text" id="date_register" class="input" placeholder="DOB">
            <div id="date_error" class="error_field"></div>
          </div>
          <p class="agree"><input type="checkbox" name="checkbox" value="check" id="agree_register" checked/> I have read and agree to the Terms and Conditions and Privacy Policy</p>
          <a  class="button_sign" id="sign_up">Sign up</a>
               </form>

So my really problem is to stop all other function until user location is block or allow . And to ask location should done at first before any other function .

This might somewhat help : http://stackoverflow.com/questions/10077606/check-if-geolocation-was-allowed-and-get-lat-lon — callback, Oct 31 '16 at 15:11

TheValyreanGroup · Answer 1 · 2016-10-31T15:50:54.323

0

You could use a boolean to store whether or not they have allowed access yet. Try something like this.

var didMakeLocationDecision = false;

$(document).ready(function() {
  if (navigator.geolocation) {
    didMakeLocationDecision = true;
    navigator.geolocation.getCurrentPosition(successFunction, errorFunction);
  }

  //Get the latitude and the longitude;
  function successFunction(position) {
    var lat = position.coords.latitude;
    var lng = position.coords.longitude;
  }

  function errorFunction() {
    alert("You have blocked us to know your location . You can't be a journalist without that ...");
    window.location.href = 'index.php';
  }

  $(".input").change(function() {
    log(this);
  });

  function log(element) {
    var text = element.val();
    console.log(text);
  }

  $('.button_sign').click(function() {
    log(this);
    log('.input');
    alert(lat);
    alert(lng);
  });

});

$(document).click(function(e) { 
    if (e.button == 0 && !didMakeLocationDecision) {
        e.preventDefault();
        errorFunction();
    }
});

edited Oct 31 '16 at 15:50

answered Oct 31 '16 at 15:09

TheValyreanGroup

3,407
2
10
30

Error is coming 'Uncaught ReferenceError: didMakeLocationDecision is not defined' . It is not working @TheValyreanGroup – Harsh Agarwal Oct 31 '16 at 15:42
Move the declaration for that variable outside of the `.ready` function. I've made the edits to the code. – TheValyreanGroup Oct 31 '16 at 15:50
It is still not working . I can still click on input and do everything . – Harsh Agarwal Oct 31 '16 at 16:08
function works . it doesn't allow me to click but i can click on input element . – Harsh Agarwal Oct 31 '16 at 16:55

How to make all other function stops till user allow or block the navigator.geolocation in Jquery?

1 Answers1