【问题标题】:Display/Hide button when writing on autocomplete input在自动完成输入上写入时显示/隐藏按钮
【发布时间】:2015-12-07 17:04:05
【问题描述】:

我有一个表格来管理带有姓名和地址的个人信息。 页面加载后,表单在输入文本中显示名称信息和地址信息。

1/ 如果我更改地址,自动完成 js 显示谷歌地图地址列表。目前我想隐藏提交按钮,直到点击地址。

2/如果没有点击或右键结果我想删除输入,显示“占位符”并显示按钮提交。

这是我的 jquery 脚本:

<script type='text/javascript'>
    $(document).ready(function(){           
         $('#adress').keyup(function() {
            $('#validate_info').hide();
         });
    });
</script>

这里是Html/php代码:

<input type="text" id="name" placeholder="George Lake"></input>
<input type="text" id="address" placeholder="17 Street Lane, Leeds, Royaume-Uni" ></input>
<button type="submit" id="validate_info">Validate</button>

页脚脚本页面:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places&language=en-AU"></script>
<script>
    var autocomplete = new google.maps.places.Autocomplete($("#address")[0], {});

    google.maps.event.addListener(autocomplete, 'place_changed', function() {
        var place = autocomplete.getPlace();
        console.log(place.address_components);
    });
</script>

【问题讨论】:

    标签: php jquery html


    【解决方案1】:

    此代码将为您提供帮助。

    <script type='text/javascript'>
         $(document).ready(function(){           
            $('#adress').keyup(function() {
               $('#validate_info').css("display", "none");
            });
         });
    </script>
    

    您的页脚脚本页面。

    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places&language=en-AU"></script>
    <script>
           var autocomplete = new google.maps.places.Autocomplete($("#address")[0], {});
    
           google.maps.event.addListener(autocomplete, 'place_changed', function() {
               var place = autocomplete.getPlace();
               // Check here that place is empty or not
               if(place == ''){
                   $('#address').value("");
                   $('#validate_info').css("display", "block");
               }
            });
    </script>
    

    【讨论】:

    • 谢谢。但是如果输入被删除并且占位符显示第一个结果(来自页面加载),我想显示按钮提交
    • 我已经编辑了我的答案。我已将按钮 css 按钮属性从“无”更改为“阻止”。所以现在它会显示提交按钮。
    • 抱歉,如果我删除#address 中的所有内容,#validate_info 不会出现:-/
    • 这可能由于不同的原因而发生。将警报置于 if 条件并检查它是否进入条件。因为对于显示按钮,我给了你一个正确的代码。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-11-16
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-05-10
    • 1970-01-01
    相关资源
    最近更新 更多