Laravel 6.* Blade：按钮 Onclick 事件未在页面底部调用 Javascript

Question

我有一个带有两个隐藏输入字段的表单来保存尝试提交表单的当前用户的经度和纬度，我现在在刀片文件下面编写了 javascript 来设置获取当前 gps 位置并将其设置为两个字段，因此它可以与表单一起提交，但永远不会调用方法。请问可能的问题是什么，我使用的是 Laravel 6.*

<script type="application/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></script>

<script type="application/javascript">
    $(document).ready(function() {
        var y = document.getElementById("lat");
        var z = document.getElementById("lng");


        function getLocation() {
            if ("geolocation" in broswer) {
                alert(navigator.geolocation)
                navigator.geolocation.getCurrentPosition(showPosition, showError);
            } else {
                alert("System");
            }
        }


        function showPosition(position) {
            y.innerHtml.value = position.coords.latitude;
            z.innerHtml.value = position.coords.longitude;
        }

        function showError(error) {
            switch (error.code) {
                case error.PERMISSION_DENIED:
                    alert("Permission Denied")
                    break;
                case error.POSITION_UNAVAILABLE:
                    alert("Position not available")
                    break;
                case error.TIMEOUT:
                    alert("Timed out")
                    break;
                case error.UNKNOWN_ERROR:
                    alert("Unknown Error")
                    break;
            }
        }
    })

</script>

<form class="form" method="PUT" action="{{ route('newBid') }}">
    @csrf
    <input type="number" class="form-control" name="amount" placeholder="0.00" required /><br/>
    <input type="hidden" name="auction_id" value="{{ $auction->id }}" />
    <button type="submit" onclick="getLocation()" class="btn btn-danger btn-block">
        {{ __('Bid') }}
    </button>
    <input type="hidden" id="lat" value="">
    <input type="hidden" id="lng" value="">
</form>

Answer 1

通常，发生这种情况时，是因为在触发 de onclick 之前提交了表单。尝试将submit 的类型更改为button，然后在getLocation 函数的末尾，调用表单的submit 函数

<script type="application/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></script>

    <script type="application/javascript">
        $(document).ready(function() {
            var y = document.getElementById("lat");
            var z = document.getElementById("lng");


            function getLocation() {
                if ("geolocation" in broswer) {
                    alert(navigator.geolocation)
                    navigator.geolocation.getCurrentPosition(showPosition, showError);
                } else {
                    alert("System");
                }
                // we submit the form manually
                $('.form').submit();
            }        


            function showPosition(position) {
                y.innerHtml.value = position.coords.latitude;
                z.innerHtml.value = position.coords.longitude;
            }

            function showError(error) {
                switch (error.code) {
                    case error.PERMISSION_DENIED:
                    alert("Permission Denied")   
                        break;
                    case error.POSITION_UNAVAILABLE:
                    alert("Position not available")   
                        break;
                    case error.TIMEOUT:
                    alert("Timed out")   
                        break;
                    case error.UNKNOWN_ERROR:
                    alert("Unknown Error")   
                        break;
                }
            }
        })

    </script>

<form class="form" method="PUT" action="{{ route('newBid') }}">@csrf
                                                <input type="number" class="form-control" name="amount" placeholder="0.00" required /><br/>
                                                <input type="hidden" name="auction_id" value="{{ $auction->id }}" />
                                                <!-- we changed the type to button -->
                                                <button type="button" onclick="getLocation()" class="btn btn-danger btn-block">
                                                    {{ __('Bid') }}


                                                </button>
                                                <input type="hidden"  id="lat" value="">
                                                <input type="hidden" id="lng" value="">
                                            </form>