関係のないボタンが押されてしまう JavaScript Rails

Question

railsにてアプリ開発中
現在地の所得ボタンを押すと、新規投稿ボタンがなぜか反応して、投稿してしまう問題を解決したい。

      <div class="center">
        <div class="btn-margin">
          <button id="get-position-btn" class="btn btn-outline-primary btn-lg">　#このボタンを押すとなぜか
              現在位置を取得する
          </button>
        </div>
        <div class="txt-margin">
            <p>緯度：<span id="latitude">???</span><span>度</span></p>
            <p>経度：<span id="longitude">???</span><span>度</span></p>
        </div>
      </div>
      <%= javascript_pack_tag 'photo/new' %>
    </div>


    <div class='post-new-btn'>
      <%= f.submit "投稿する" ,class: 'post-new' %> #このボタンが反応して投稿されてしまいます
    </div>

<%= javascript_pack_tag 'photo/new' %>の中身↓

// ボタンを押した時の処理
document.getElementById("get-position-btn").onclick = function(){
  // 位置情報を取得する
  navigator.geolocation.getCurrentPosition(successCallback, errorCallback);
};

// 取得に成功した場合の処理
function successCallback(position){
  // 緯度を取得し画面に表示
  var latitude = position.coords.latitude;
  document.getElementById("latitude").innerHTML = latitude;
  document.getElementById("latitude-form").value = latitude;
  // 経度を取得し画面に表示
  var longitude = position.coords.longitude;
  document.getElementById("longitude").innerHTML = longitude;
  document.getElementById("longitude-form").value = longitude;

  var latlng = new google.maps.LatLng(latitude, longitude);

  var marker = new google.maps.Marker({
    map: map,
    position: latlng
  });

  map.setCenter(latlng);
};

// 取得に失敗した場合の処理
function errorCallback(error){
  alert("位置情報が取得できませんでした");
};

(function() {
  console.log("OK");
});

この様な感じです
クリックした時位置情報の取得はできているのですが、それと同時に投稿ボタンが押されてしまいます。
原因がわかる方ぜひご回答よろしくお願い致します！

Answer 1

form の中にある button にtypeが指定されていないため、
submitとして機能してしまっているように見えます。

<button id="get-position-btn" class="btn btn-outline-primary btn-lg" type="button">

としてみてください。

Comments

[EleAco]

neko_daisukiさん
ありがとうございました！！
その様に記述することで無事現在地取得を押すと投稿されずにしっかり動作いたしました！