使用 jQuery 获取用户坐标

Question

需要你的帮助。

我不确定自己在做什么，而且我还将 jQuery 和 JS 混合在一起进行扩展，这根本没有任何意义，但我不知道该怎么做以及如何解决这个问题。

我希望form 中的#third-input 的value 在form 为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>

这是我的这个表单的 jQuery

$('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;

我从这个链接中获得的地理定位想法 [http://www.w3schools.com/][1]

如您所见，我对此很陌生，但我可以向您保证，我进行了一次健康的搜索，但没有找到任何解决方案。我也想避免使用插件。

谢谢。

欢迎使用 cmets 编写代码，我只是想确定“做什么”。

[1]：w3schools.com 上的地理位置

Answer 1

1. 您的 javascript 代码似乎被删减或遗漏了一些 { 或 }
2. 我可以建议将required attribute 添加到输入字段中，而不必手动检查吗？然后你可以使用:invalid 和:valid 伪类来设置它的样式。
3. 一旦你获得了输入值字符串，.val() 就是一个吸气剂。你要做的是使用setter方法.val("geo not supported")
   • 您永远不能将函数指定为其他函数。 (val() = '')
   • 从$('#third-input').val(); 中删除.val(); 就足够了
   • 但我认为您不应该将该值设置为不受支持的描述，因为该字段应该只包含一个位置，在上面或其他地方添加该位置
4. 对于电话号码字段，我将使用 tel 类型而不是 text
5. <br> 已经自动关闭，无需添加/。
6. IMO placeholder 不适用于标记输入字段。它们应该用作示例输入（阅读this）
7. 添加一些autocompletion 也不会那么糟糕
8. 如果您在关注输入字段时不喜欢占位符，则使用 css :focus + ::placeholder 将其删除，而不是设置/删除模糊/焦点上的占位符属性
   • IMO 我认为它应该是静态的，不要管它

这是我总结的解决方案：https://jsfiddle.net/1u8v0mam/1/