簡體   English   中英

它不會在PHP之前運行Javascript代碼,onClick提交按鈕

[英]it does not run Javascript code before Php, onClick submit button

單擊其假設以從Java腳本獲取值並將其提交給php; 取而代之的是,它僅采用下拉值,這意味着JavaScript代碼不會運行。 我不確定java腳本代碼是否可以運行? 這是我的代碼:

    <section class="main-container">
        <div class="main-wrapper">
            <h2>Home</h2>

                    <form method="GET" action="storelocator.php" > 

                            <input type="submit"  value="Stores">
                            <input id="latitudeId" name="lat" type="hidden"  >
                            <input id="longitudeId" name="lng" type="hidden"  >

                            <div class="dropdown">   
                             <select name="radius">
                              <option value="1000">1000</option>
                              <option value="500" selected="selected" >500</option>
                              <option value="300">300</option>
                              <option value="100">100</option>
                            </select>
                            </div>      

                        </form>

                        <p id="show"></p>


                        <script type="text/javascript">

                                var x = document.getElementById("show");
                                var form = document.querySelector('form');
                                form.addEventListener('submit', function(e) {
                                    e.preventDefault();
                                    getLocation();
                                });

                                //Event to be added to the hidden form
                                function getLocation() {
                                    if (navigator.geolocation) {
                                        navigator.geolocation.getCurrentPosition(showPosition);
                                    } else { 
                                        x.innerHTML = "Geolocation is not supported by this browser.";
                                    }
                                }
                                function showPosition(position) {
                                      var lat = position.coords.latitude;
                                      var lng = position.coords.longitude;

                                      document.getElementById("latitudeId").value = lat;
                                      document.getElementById("longitudeId").value = lng;

                                      form.submit();
                                }


                        </script>

你可以試試這個

<html>
    <body>
        <section class="main-container">
            <div class="main-wrapper">
                <h2>Home</h2>
                <script>
                    //Event to be added to the hidden form
                    function getLocation() {
                        if (navigator.geolocation) {
                            navigator.geolocation.getCurrentPosition(showPosition);
                        } else {
                            document.getElementById("show").innerHTML = "Geolocation is not supported by this browser.";
                        }
                    }

                    function showPosition(position) {
                        document.getElementById("latitudeId").value = position.coords.latitude;
                        document.getElementById("longitudeId").value = position.coords.longitude;

                        document.getElementById('myForm').submit();
                    }
                </script>

                <form id="myForm" method="GET" action="index.php" >
                    <input type="button"  value="Stores" onclick="getLocation()">
                    <input id="latitudeId" name="lat" type="hidden"  >
                    <input id="longitudeId" name="lng" type="hidden"  >
                    <div class="dropdown">
                        <select name="radius">
                            <option value="1000">1000</option>
                            <option value="500" selected="selected" >500</option>
                            <option value="300">300</option>
                            <option value="100">100</option>
                        </select>
                    </div>
                </form>
                <p id="show"></p>
            </div>
        </section>
    </body>
</html>

在內容之前加載腳本,以便您可以處理點擊事件

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM