当我在输入文本框上输入任何搜索关键字然后按回车键时阻止表单提交。使用 Jquery

Question

嗨，我在 laravel blade,

上有这个代码

<h1 class="" id="module-users-h1">Search User</h1>

<form class="" id="module-user-search" action="" method="post">
    <div class="field has-addons">
        <div class="control is-expanded">
            <input class="input" type="text" name="user" id="module-user-search-input" placeholder="Find user">
        </div>
        <div class="control">
            <button type="button" class="button is-info" id="module-user-button" name="button">Seach</button>
        </div>
    </div>
</form>

用于搜索功能。

我有这个 javascript 代码，

/**
 * Perform search user -------------------
 *
 * @return void
 */
$('#module-user-button').click(function(e) {
    let formData = $(this).parents('form').serialize();

    axios.get('/modules/getuser/' + formData.split('=')[1])
    .then((response) => {
        console.log(response.data);
    });
});

$('#module-user-search-input').keyup(function (e) {
    e.preventDefault();

    if (e.keyCode === 13) {
        $('#module-user-button').click();
    }
});

除了单击按钮之外，我还想在按下回车键时执行搜索。

问题是，当我在输入文本框中输入任何用户名作为搜索关键字然后按下回车键时。表单将在 laravel.

中提交导致此类错误

对此有什么想法或解决方案吗？

Answer 1

您可以通过在表单中按回车键返回 false 来禁用默认行为：

$(document).on("keypress", "#module-user-search", function(event) 
{ 
    if (event.keyCode == 13)
        return false;
});

当我在输入文本框上输入任何搜索关键字然后按回车键时阻止表单提交。使用 Jquery

Prevent form submit when I put any search keyword on the input text box then pressed enter. Using Jquery

javascript

jquery

laravel-5.7