按下ENTER时提交某个按钮

Question

I have a web page with one form and many buttons. I want to submit a POST for the search button when the user presses ENTER in the search textbox where the POST holds the name of the search button.

I have seen many solutions to submit a POST of a form, but none of them told me how to include the search button within the form POST.

This is a simplified version of the code:

The template:

<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>

My views:

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

I have tried this way:

<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>

But how can I include the button within the POST data? By default, when I press ENTER, the print button is submitted Thank you very much.

Answer 1

I tried this myself and managed to make it work the following way.

<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>

The script posts 'btn-hello' to the backend as expected. I also changed #importButton to #importButton2 and it posted 'btn-byebye'.

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

Perhaps the fault in your code lies in document.getElementById('btn_search').click();. Try to use $("#btn_search").click();