javascript - Laravel 6.* Blade : Button Onclick Event not Invoking Javascript at the bottom of the page

Question

我有一个带有两个隐藏输入字段的表单，用于保存尝试提交表单的当前用户的经度和纬度，我现在在blade文件下面编写了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>