Question

点击它的假设从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>

Answer 1

你可以试试这个

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

在内容之前加载脚本，以便您可以处理点击事件

它不会在Php之前运行Javascript代码，onClick提交按钮

1 个答案: