Bootstrap 表单总是在 Enter 时提交答案

【问题标题】：Bootstrap Form Always Submits on EnterBootstrap 表单总是在 Enter 时提交
【发布时间】：2020-10-02 22:09:05
【问题描述】：

我有一个 jquery 函数：

$("#get-input").keyup(function (event) {
    if (event.keyCode === 13) {
        $("#get-data").click();
    }
});

$("#get-data").click(function (e) {
    var endpoint = $(".get-input").val();

    if ($('#data-display').is('[hidden]')) {
        $('#data-display').removeAttr('hidden');
    }

    $.ajax
        ({
            url: "https://localhost:44398/api/" + endpoint,
            type: 'get',
            success: function (data) {
                $('.formatted-json').text(JSON.stringify(data, null, '\t'))
            }
        });
});

我的表格：

<form class="form-inline">
                <div class="form-group query-container">
                    <label class="get-lbl pr-2">this is the label</label>
                    <input type="text" class="form-control-lg get-input" placeholder="placeholder" />
                    <input type="button" class="btn btn-orange btn-get" id="get-data" value="submit" />
                </div>
            </form>

当我单击#get-data 按钮时，这非常有效。 ajax被命中，数据显示出来。我的问题是，当我按下回车键时，它会重新加载整个页面。我需要 enter 键的作用与单击按钮相同。

我尝试将keyup 更改为keydown 和keypress，但没有成功。我尝试将表单上的.click 函数更改为.submit 函数，而不是输入。我还把所有的 JS 都包裹在了一个 document ready 调用中，但它仍然可以正常工作。

有没有人知道当我按下回车键时我需要做什么才能使其正常工作？

【问题讨论】：

w3schools.com/jquery/event_preventdefault.asp 并检查现有答案：stackoverflow.com/questions/37450508
谢谢你，不幸的是我已经尝试了这两个建议，但页面仍然在输入时重新加载。
查看stackoverflow.com/questions/699065/…
感谢您的链接。我在那里尝试了所有建议，但是当我按下回车键时，这个表单仍然会重新加载页面。

标签： javascript html jquery forms bootstrap-4

【解决方案1】：

这不是一个完整的答案，但这是我能想到的最好的答案。如果有人有更好的解决方案，我很乐意将其标记为答案而不是这个！

我最终将onsubmit="return false" 添加到我的开头form 标记中。

这确保了用户不能按 Enter 键来提交表单。因此，用户现在只能通过单击将触发 jQuery click 函数的按钮来提交表单。

【讨论】：