Obtain user coordinates with jQuery

Question

need your help.

I am not sure what I am doing, and I also mix jQuery and JS together to an extend which is simply not making any sense, but I don't know what to do and how to approach this issue.

I want the value of the #third-input in my form to be updated with the coordinates once form was submitted.

<form class="flex-form" action="MAILTO:someone@example.com" method="post" enctype="text/plain">
<input id="first-input" type="text" placeholder="What is your name?" onfocus="this.placeholder = ''" onblur="this.placeholder = 'What is your name?'" value="" name="name">
<br />
<input id="second-input" type="text" pattern="[0-9]*" placeholder="Enter your phone number" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Enter your phone number'" value="" name="phone-number">
<br />
<input id="third-input" type="text" placeholder="Press button and Share location" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Press button and Share location'" value="" disabled="disabled" name="coordinates">
<br />
<input type="submit" value="Send Us Request">
</form>

Here is my jQuery for this form

$('form').submit(function(){
  var name = $('#first-input').val();
  var telephone = $('#second-input').val();
  var location = $('#third-input').val();


  if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(showPosition);
    } else { 
    location.val() = "Geolocation is not supported by this browser.";
    }

    }

    function showPosition(position) {
    location.val(position.coords.latitude + ", " + position.coords.longitude);  

    }



  if(name === ''){
    $('#first-input').css('border-top', 'solid 5px #ED6D60');
  } else {
    $('#first-input').css('border-top', 'solid 5px #0ED54D');
  }

  if(telephone === ''){
    $('#second-input').css('border-top', 'solid 5px #ED6D60');
  } else {
    $('#second-input').css('border-top', 'solid 5px #0ED54D');
  }

  if(location === ''){
    $('#third-input').css('border-top', 'solid 5px #ED6D60');
  } else {
    $('#third-input').css('border-top', 'solid 5px #0ED54D');
  }

  return false;

The Geolocation idea I took from this link [http://www.w3schools.com/][1]

As you can see, I am very new to it, but I can promise you that I made a healthy search and didn't find any solution. I would also like to avoid using plugins.

Thanks.

Code with comments is welcome, I just want to be sure "what does what".

[1]: Geolocation on w3schools.com

score 1 · Accepted Answer · edited May 23 '17 at 12:16

It looks like your javascript code is cut of or missing some { or }
May i suggest to add the required attribute to the input field instead of having to check it manually? Then you can use the :invalid and :valid pseudo class to style it.
.val() is a getter once you have that you got yourself the input value string. What you want to do is to use the setter method .val("geo not supported")
- You can never assign a function to be something else. (val() = '')
- Removing the .val(); from $('#third-input').val(); should be sufficient
- But i don't think you should set that value to a not-supported description as the field should only contain a location add that above or somewhere else
For the phone number field I would use the tel type instead of text
<br> is already self closing, so no need to add /.
IMO placeholder is not meant for labeling input fields. They should be used as example input (read this)
throwing in some autocompletion wouldn't be so bad either
if you don't like the placeholder when you focus on the input field then use css :focus + ::placeholder to remove it instead of setting/removing the placeholder attribute on blur/focus
- IMO I think it should be static and let that be left alone

Here is my solution all summarized: https://jsfiddle.net/1u8v0mam/1/

100% spot on, thank a lot, I used and read through all your suggestions. — vlad, May 08 '16 at 13:33

Obtain user coordinates with jQuery

1 Answers1