ENTERを押したときに特定のボタンを送信

Question

私は1つのフォームと多数のボタンを持つWebページを持っています。 POSTが検索ボタンの名前を保持する検索テキストボックスで、ユーザーがEnterキーを押したときに、検索ボタンのPOSTを実行したいとします。

私はフォームのPOSTを提出する多くのソリューションを見てきましたが、POSTのフォーム内に検索ボタンを含める方法を教えてくれた人はいませんでした。

これは、コードの簡易版である：私はこの方法を試してみました

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> 

テンプレート：

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

私の見解しかし、私はどうすればいいですか？ POSTデータ内のボタンを除外しますか？ デフォルトでは、Enterキーを押すと印刷ボタンが送信されます ありがとうございました。

Answer 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'）である。）（クリック;. $（ "＃btn_search"）を使用してみてください。