按下 ENTER 时提交某个按钮答案

【问题标题】：Submit a certain button when ENTER is pressed按下 ENTER 时提交某个按钮
【发布时间】：2016-10-22 19:34:19
【问题描述】：

我有一个包含一个表单和多个按钮的网页。当用户在 POST 保存搜索按钮名称的搜索文本框中按 ENTER 时，我想为搜索按钮提交一个 POST。

我见过很多提交表单 POST 的解决方案，但没有一个告诉我如何在表单 POST 中包含搜索按钮。

这是代码的简化版本：

模板：

<form name="form" id="form" action="" method="POST">
    <input type="text" id="txtbx_search" name="txtbox_search"> 

    <button id="btn_print" type="submit" name="btn_print"><b>Print</b> </button>

    <button id="btn_delete" type="submit" name="btn_delete"><b> Delete</b> </button>

    <button id="btn_search" type="submit" name="btn_search"><b>Search</b> </button>

    {% csrf_token %}

</form>

我的看法：

if request.method == POST:
        if 'btn_search' in request.POST:
            # Do my search

我试过这种方式：

<script>
        $(document).ready(function () {
            $('#txtbx_search').keypress(function (e) {
                if (e.keyCode == 13) {
                    e.preventDefault();

                    document.getElementById('btn_search').click();
                    //OR
                    document.getElementById('form').submit();
                }
            });
        });

</script>

但是如何在 POST 数据中包含按钮？默认情况下，当我按 ENTER 时，提交打印按钮非常感谢。

【问题讨论】：

嗨，这个代码提交了吗？是否需要在提交前点击 btn_search ？
使用 tabindex 试试看。
当焦点位于输入元素内部并且按下enter 时，提交表单是默认行为。
document.getElementById('form').submit();正在提交，但点击不是这就是我说的原因，或者因为我都尝试了它们。 document.getElementById('form').submit();提交但 POST 数据没有“btn_search”
@Rayon 是的，但是如何将焦点移到另一个按钮上？

标签： javascript jquery django django-templates

【解决方案1】：

我自己尝试过，并设法使其以下列方式工作。

<form id="importForm" method="post" enctype="multipart/form-data">
            <div class="row" style="text-align:center">
                <button id="importButton" type="submit" class="btn btn-primary" name="btn-hello">
            <span class="glyphicon glyphicon-upload" aria-hidden="true"></span> Import
            </button>

                <button id="importButton2" type="submit" class="btn btn-primary" name="btn-byebye">
            <span class="glyphicon glyphicon-upload" aria-hidden="true"></span> Import
            </button>
            </div>

</form>

脚本按预期将“btn-hello”发布到后端。我还将#importButton 更改为#importButton2，它发布了“btn-byebye”。

$(document).ready(function () {
    $('body').keypress(function (e) {
        if (e.keyCode == 13) {
            e.preventDefault();
            $("#importButton").click();
        }
    });
});

也许您的代码中的错误在于 document.getElementById('btn_search').click();。尝试使用 $("#btn_search").click();

【讨论】：