javascript - 使用 jQuery 获取用户坐标

Question

需要你的帮助。

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

我希望我的form中的#third-input的值用坐标更新一次form 已提交。

<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]

正如你所看到的，我对此很陌生，但我可以向你保证，我进行了良好的搜索，但没有找到任何解决方案。我还想避免使用插件。

谢谢。

欢迎带注释的代码，我只是想确定“做什么”。

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

Answer 1

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

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