Question

我有一个由AJAX运营的搜索。当用户按下搜索按钮时，它的效果非常好，问题是......如果用户按下输入...它提交表单而不是执行AJAX javascript函数。如何让Enter按钮调用我的AJAX函数而不是提交表单？

Answer 1

使用表单的onsubmit事件来执行您的ajax调用，并将该按钮设置为提交按钮（如果尚未提供）。

示例HTML

<form action="/search.php" onsubmit="submitAjaxQuery(event)">
    <input type="text" name="keywords" />
    <button type="submit">Go!</button>
</form>

示例JS

function submitAjaxQuery(event)
{
    if (event.preventDefault)
        event.preventDefault();
    else
        event.cancel = true;

    // run ajax calling function here.
}

Answer 2

这是一种处理此问题的简单DOM方法：

<form action="javascript:void(0)">
    <input type="text" />
    <input type="submit" onclick="doSomething(this.form)">  
</form>
<script>
    function doSomething(form){
        alert('form submitted');
    }
</script>

将光标放在输入字段中，如果单击按钮或输入enter，则表单由javascript（不是页面）提交

Answer 3

将其捕获在表单的onSubmit方法中并返回false。

Answer 4

使用jQuery：

jQuery("#myform").submit(function() {
 callAJAXFunction();
 return false;
});

Answer 5

正确的方法是让非JavaScript用户使用表单提交页面刷新，但javascript调用javascript：

<form action="yourscript.php" method="post" onsubmit="doSomething(this.form); return false;">
    <input type="text" />
    <input type="submit" />  
</form>
<script>
    function doSomething(form){
        alert('form submitted');
    }
</script>

在输入上按提交文本字段（AJAX）

5 个答案: