按下回车提交表格,并在没有重新加载的情况下以模态显示结果

时间:2018-04-29 18:07:11

标签: javascript jquery html ajax forms

所以,这是我的表格......它没有被<form></form>标签包围。

<input id="query" name="query" style="font-size: 18pt" id="text" data-email="required" type="text" placeholder="Search Here from <?php echo $row['no']."+"; ?> ..." class="extra-big-input border-none">
<div class="input-group-btn">
    <button onclick="search()" href="#result-modal" class="btn btn-large bg-white text-medium-gray btn-rounded btn-dark-gray popup-with-zoom-anim wow" data-wow-delay="0.6s"><i class="ti-search icon-small tz-icon-color no-margin position-raltive top-2"></i> Search</button>
</div>

单击按钮search()被称为

<script>
        function search()
        {
            document.getElementById('queryresult').innerHTML = "<img src='images/loading.svg'>";
            var query=document.getElementById('query').value;
            $.ajax({
            method: 'POST',
            url: 'results.php',
            data: {
                query: query
            },
            success: function(data) {
                document.getElementById('queryresult').innerHTML = data;
            }
            })
        }
    </script>

这里是我的问题...如何更改此代码,以便按Enter键也可以调用search()。??

注意: -

如果查询输入为空,则不应调用该函数[无法为空查询调用它]

点击按钮也会显示模态[显示结果的位置]所以如何调用search()并按下回车键显示模态?

1 个答案:

答案 0 :(得分:0)

试试这个:

window.onkeyup = function(e) {
search()
console.log(e)
}

然后,如果您只想使用某个键来执行搜索,请使用e.keyCode