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