将输入设置为能够读取整数值答案

【问题标题】：Set the input to be able to read integer value将输入设置为能够读取整数值
【发布时间】：2020-04-09 18:08:58
【问题描述】：

我创建的页面是采用纬度和经度值输入。

<div class="container ">
        <form class="entry">
            <div class="aligncenter">
                <h5 style="color:MediumTurquoise; font-weight:100; font-family:'Oswald', sans-serif; letter-spacing: 0.1em;">Please enter the coordinate</h5>
                <div>
                    <input type="number" min="0.0000000" max="999.9999999" id="lat" placeholder="Latitude">
                    <input type="number" min="0.0000000" max="999.9999999" id="long" placeholder="Longitude">
                    <button class="btn-rounded btn-normal btn-medium btn-primary" id="search" value="get Info">Submit</button>
                </div>
            </div>
        </form>
    </div>

根据输入，我使用 Jquery 运行脚本以显示来自 REST API 的信息。

 <script>
    var data;
    $(document).ready(function () {
        $("#search").click(function () {

            let lat = $("#lat").val();
            let long =$("#long").val();
            if (lat == "" || long == "") {
                alert("please enter lat and long to get info");
                return;
            }
            else {
                document.getElementById('message').style.visibility = 'hidden';
                document.getElementById('note').style.visibility = 'visible';
                $('#note').show();
                $('.show-onclick').show();
                $.ajax({

                    type: "GET",
                    url: `https://rest.soilgrids.org/query?lon=${long}&lat=${lat}&attributes=ORCDRC,PHIHOX,PHIKCL,BLDFIE,CLYPPT,SLTPPT,SNDPPT,WWP`,
                    dataType: "json",
                    success: function (response) {
                        console.log(response);
                        var phihoxsl1 = response.properties.PHIHOX.M.sl1;
                        var phihoxsl2 = response.properties.PHIHOX.M.sl2;
                        var phihoxsl3 = response.properties.PHIHOX.M.sl3;
                        var phihoxsl4 = response.properties.PHIHOX.M.sl4;
                        var phihoxsl5 = response.properties.PHIHOX.M.sl5;
                        var phihoxsl6 = response.properties.PHIHOX.M.sl6;
                        var phihoxsl7 = response.properties.PHIHOX.M.sl7;
                        document.getElementById('phihoxsl1').innerHTML = "SL1 = " + phihoxsl1;
                        document.getElementById('phihoxsl2').innerHTML = "SL2 = " + phihoxsl2;
                        document.getElementById('phihoxsl3').innerHTML = "SL3 = " + phihoxsl3;
                        document.getElementById('phihoxsl4').innerHTML = "SL4 = " + phihoxsl4;
                        document.getElementById('phihoxsl5').innerHTML = "SL5 = " + phihoxsl5;
                        document.getElementById('phihoxsl6').innerHTML = "SL6 = " + phihoxsl6;
                        document.getElementById('phihoxsl7').innerHTML = "SL7 = " + phihoxsl7;
                        var phikclsl1 = response.properties.PHIKCL.M.sl1;
                        var phikclsl2 = response.properties.PHIKCL.M.sl2;
                        var phikclsl3 = response.properties.PHIKCL.M.sl3;
                        var phikclsl4 = response.properties.PHIKCL.M.sl4;
                        var phikclsl5 = response.properties.PHIKCL.M.sl5;
                        var phikclsl6 = response.properties.PHIKCL.M.sl6;
                        var phikclsl7 = response.properties.PHIKCL.M.sl7;
                        document.getElementById('phikclsl1').innerHTML = "SL1 = " + phikclsl1;
                        document.getElementById('phikclsl2').innerHTML = "SL2 = " + phikclsl2;
                        document.getElementById('phikclsl3').innerHTML = "SL3 = " + phikclsl3;
                        document.getElementById('phikclsl4').innerHTML = "SL4 = " + phikclsl4;
                        document.getElementById('phikclsl5').innerHTML = "SL5 = " + phikclsl5;
                        document.getElementById('phikclsl6').innerHTML = "SL6 = " + phikclsl6;
                        document.getElementById('phikclsl7').innerHTML = "SL7 = " + phikclsl7;
                        var orcdrcsl1 = response.properties.ORCDRC.M.sl1;
                        var orcdrcsl2 = response.properties.ORCDRC.M.sl2;
                        var orcdrcsl3 = response.properties.ORCDRC.M.sl3;
                        var orcdrcsl4 = response.properties.ORCDRC.M.sl4;
                        var orcdrcsl5 = response.properties.ORCDRC.M.sl5;
                        var orcdrcsl6 = response.properties.ORCDRC.M.sl6;
                        var orcdrcsl7 = response.properties.ORCDRC.M.sl7;
                        document.getElementById('orcdrcsl1').innerHTML = "SL1 = " + orcdrcsl1;
                        document.getElementById('orcdrcsl2').innerHTML = "SL2 = " + orcdrcsl2;
                        document.getElementById('orcdrcsl3').innerHTML = "SL3 = " + orcdrcsl3;
                        document.getElementById('orcdrcsl4').innerHTML = "SL4 = " + orcdrcsl4;
                        document.getElementById('orcdrcsl5').innerHTML = "SL5 = " + orcdrcsl5;
                        document.getElementById('orcdrcsl6').innerHTML = "SL6 = " + orcdrcsl6;
                        document.getElementById('orcdrcsl7').innerHTML = "SL7 = " + orcdrcsl7;
                        var wwpsl1 = response.properties.WWP.M.sl1;
                        var wwpsl2 = response.properties.WWP.M.sl2;
                        var wwpsl3 = response.properties.WWP.M.sl3;
                        var wwpsl4 = response.properties.WWP.M.sl4;
                        var wwpsl5 = response.properties.WWP.M.sl5;
                        var wwpsl6 = response.properties.WWP.M.sl6;
                        var wwpsl7 = response.properties.WWP.M.sl7;
                        document.getElementById('wwpsl1').innerHTML = "SL1 = " + wwpsl1;
                        document.getElementById('wwpsl2').innerHTML = "SL2 = " + wwpsl2;
                        document.getElementById('wwpsl3').innerHTML = "SL3 = " + wwpsl3;
                        document.getElementById('wwpsl4').innerHTML = "SL4 = " + wwpsl4;
                        document.getElementById('wwpsl5').innerHTML = "SL5 = " + wwpsl5;
                        document.getElementById('wwpsl6').innerHTML = "SL6 = " + wwpsl6;
                        document.getElementById('wwpsl7').innerHTML = "SL7 = " + wwpsl7;
                        var bldfiesl1 = response.properties.BLDFIE.M.sl1;
                        var bldfiesl2 = response.properties.BLDFIE.M.sl2;
                        var bldfiesl3 = response.properties.BLDFIE.M.sl3;
                        var bldfiesl4 = response.properties.BLDFIE.M.sl4;
                        var bldfiesl5 = response.properties.BLDFIE.M.sl5;
                        var bldfiesl6 = response.properties.BLDFIE.M.sl6;
                        var bldfiesl7 = response.properties.BLDFIE.M.sl7;
                        document.getElementById('bldfiesl1').innerHTML = "SL1 = " + bldfiesl1;
                        document.getElementById('bldfiesl2').innerHTML = "SL2 = " + bldfiesl2;
                        document.getElementById('bldfiesl3').innerHTML = "SL3 = " + bldfiesl3;
                        document.getElementById('bldfiesl4').innerHTML = "SL4 = " + bldfiesl4;
                        document.getElementById('bldfiesl5').innerHTML = "SL5 = " + bldfiesl5;
                        document.getElementById('bldfiesl6').innerHTML = "SL6 = " + bldfiesl6;
                        document.getElementById('bldfiesl7').innerHTML = "SL7 = " + bldfiesl7;
                        var clypptsl1 = response.properties.CLYPPT.M.sl1;
                        var clypptsl2 = response.properties.CLYPPT.M.sl2;
                        var clypptsl3 = response.properties.CLYPPT.M.sl3;
                        var clypptsl4 = response.properties.CLYPPT.M.sl4;
                        var clypptsl5 = response.properties.CLYPPT.M.sl5;
                        var clypptsl6 = response.properties.CLYPPT.M.sl6;
                        var clypptsl7 = response.properties.CLYPPT.M.sl7;
                        document.getElementById('clypptsl1').innerHTML = "SL1 = " + clypptsl1;
                        document.getElementById('clypptsl2').innerHTML = "SL2 = " + clypptsl2;
                        document.getElementById('clypptsl3').innerHTML = "SL3 = " + clypptsl3;
                        document.getElementById('clypptsl4').innerHTML = "SL4 = " + clypptsl4;
                        document.getElementById('clypptsl5').innerHTML = "SL5 = " + clypptsl5;
                        document.getElementById('clypptsl6').innerHTML = "SL6 = " + clypptsl6;
                        document.getElementById('clypptsl7').innerHTML = "SL7 = " + clypptsl7;
                        var sltpptsl1 = response.properties.SLTPPT.M.sl1;
                        var sltpptsl2 = response.properties.SLTPPT.M.sl2;
                        var sltpptsl3 = response.properties.SLTPPT.M.sl3;
                        var sltpptsl4 = response.properties.SLTPPT.M.sl4;
                        var sltpptsl5 = response.properties.SLTPPT.M.sl5;
                        var sltpptsl6 = response.properties.SLTPPT.M.sl6;
                        var sltpptsl7 = response.properties.SLTPPT.M.sl7;
                        document.getElementById('sltpptsl1').innerHTML = "SL1 = " + sltpptsl1;
                        document.getElementById('sltpptsl2').innerHTML = "SL2 = " + sltpptsl2;
                        document.getElementById('sltpptsl3').innerHTML = "SL3 = " + sltpptsl3;
                        document.getElementById('sltpptsl4').innerHTML = "SL4 = " + sltpptsl4;
                        document.getElementById('sltpptsl5').innerHTML = "SL5 = " + sltpptsl5;
                        document.getElementById('sltpptsl6').innerHTML = "SL6 = " + sltpptsl6;
                        document.getElementById('sltpptsl7').innerHTML = "SL7 = " + sltpptsl7;
                        var sndpptsl1 = response.properties.SNDPPT.M.sl1;
                        var sndpptsl2 = response.properties.SNDPPT.M.sl2;
                        var sndpptsl3 = response.properties.SNDPPT.M.sl3;
                        var sndpptsl4 = response.properties.SNDPPT.M.sl4;
                        var sndpptsl5 = response.properties.SNDPPT.M.sl5;
                        var sndpptsl6 = response.properties.SNDPPT.M.sl6;
                        var sndpptsl7 = response.properties.SNDPPT.M.sl7;
                        document.getElementById('sndpptsl1').innerHTML = "SL1 = " + sndpptsl1;
                        document.getElementById('sndpptsl2').innerHTML = "SL2 = " + sndpptsl2;
                        document.getElementById('sndpptsl3').innerHTML = "SL3 = " + sndpptsl3;
                        document.getElementById('sndpptsl4').innerHTML = "SL4 = " + sndpptsl4;
                        document.getElementById('sndpptsl5').innerHTML = "SL5 = " + sndpptsl5;
                        document.getElementById('sndpptsl6').innerHTML = "SL6 = " + sndpptsl6;
                        document.getElementById('sndpptsl7').innerHTML = "SL7 = " + sndpptsl7;

                    },
                    error: function (error) {
                        console.log(error);
                        alert("No data found");

                    }
                })

            }
        })
    })
</script>

但是，我只能在第一次搜索时显示信息。 我输入新内容后页面不会刷新和显示新数据。我以为是输入类型的问题，但似乎无法解决。该信息确实出现在控制台中。

【问题讨论】：

当坐标上没有可用数据时，我也无法显示警报窗口，我想我可以根据误差函数显示它。
可能与提交表单有关。尝试将type="button" 添加到您的提交按钮，以防止表单提交和刷新页面。
啊是的，它成功了，谢谢。

标签： javascript jquery html css json

【解决方案1】：

尝试将type="button" 添加到您的提交按钮。

【讨论】：

【解决方案2】：

button 元素默认输入为button如果它不在form 内。

在表单内，输入一个按钮 submit，其行为与 <input type="submit" /> 相同，它验证表单并刷新页面。

所以你可以：

在任何形式之外使用您的button，而不指定任何type 属性
在指定type="button" 的表单中使用它

$("#btn").click((evt) => {
  console.log("lat="+$("#lat").val()+" long="+$("#long").val());
});

<input id="lat" type="text" />
<input id="long" type="text" />
<button id="btn">Submit</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

【讨论】：