отправить текстовое поле при вводе печати (AJAX)

Question

У меня есть поиск, который работает AJAX. Он отлично работает, когда пользователь нажимает кнопку поиска, проблема в том, что ... если пользователь нажимает ввод ... он отправляет форму, а не выполняет функцию JavaScript AJAX. Как сделать так, чтобы кнопка Enter вызывала мою функцию AJAX, а не отправляла форму?

Answer 1

Вот простой способ 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>

Поместите курсор в поле ввода, и если вы нажмете кнопку или введете ввод, форма будет отправлена ​​с помощью javascript (не страницы)

Answer 2

Используйте событие формы 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 3

Перехватите его в методе onSubmit формы и верните false.

Answer 4

Правильный способ - позволить пользователям, не поддерживающим 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>

Answer 5

С jQuery :

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