Prevent Form Submission On Enter Key Press | Example Code

Trang chủ » Html Form Block Enter Submit » Prevent Form Submission On Enter Key Press | Example Code

Có thể bạn quan tâm

Prevent form submission on Enter key press | Example Code
  • by Rohit
  • June 21, 2021April 4, 2022
  • 1 Comment

Use preventDefault() event method to Prevent form submission on the “Enter” key pressed in JavaScript. Enter key keycode is 13, so you can check in if statement.

Prevent form submission by hitting Enter key for Text Example

HTML example code.

<!DOCTYPE html> <html> <body> <form id="myForm" action="MyBackEnd.aspx" method="post"> <table> <tbody> <tr> <td> First name: <input id="fn" type="text"> </td> <td> Last Name: <input id="ln" type="text" > </td> </tr> </tbody> </table> <input type=submit> <script> document.getElementById("myForm").onkeypress = function(e) { var key = e.charCode || e.keyCode || 0; if (key == 13) { alert("No Enter!"); e.preventDefault(); } } </script> </body> </html>

Output:

Prevent form submission on Enter key press

JS stop form submit on enter

<button type="submit" onclick="submitButtonClick(event)">Submit</button> <script> function submitButtonClick(event) { event.preventDefault(); //other stuff you want to do instead... } </script>

Do comment if you have any doubts or suggestions on this JS event topic.

Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.

OS: Windows 10

Code: HTML 5 Version

Share this:

  • Facebook
  • WhatsApp
  • LinkedIn
  • More
  • X
  • Print
  • Reddit
  • Tumblr
  • Pinterest
  • Pocket
  • Telegram
  • Email

Related

Tags:JavaScript CodeJS CodeJS Keycode

1 thought on “Prevent form submission on Enter key press | Example Code”

  1. MANUEL DOMINGO March 18, 2022 at 2:08 am Log in to Reply

    That’s actually all really useful. Thanks very much

Leave a Reply Cancel reply

You must be logged in to post a comment.

Recent Posts

  • Window Memes
  • Windows memes
  • Github Memes
  • Linux memes
  • JavaScript const keyword | Basics

Categories

  • Android
  • Android Interview Questions
  • Android Kotlin
  • Android UI
  • C
  • CSS
  • Data structure
  • HTML
  • Info
  • Java
  • JavaScript
  • jQuery
  • JSON
  • Kotlin
  • Material Design
  • Memes
  • NodeJS
  • Puzzle
  • Python
  • SQL
  • Tool
  • TypeScript

Search Topics

Search for...

Archives

Archives Select Month February 2024 January 2024 December 2023 November 2023 October 2023 September 2023 August 2023 July 2023 June 2023 May 2023 April 2023 March 2023 February 2023 January 2023 December 2022 November 2022 October 2022 September 2022 August 2022 July 2022 June 2022 May 2022 April 2022 March 2022 February 2022 January 2022 December 2021 November 2021 October 2021 September 2021 August 2021 July 2021 June 2021 May 2021 April 2021 March 2021 February 2021 January 2021 December 2020 November 2020 October 2020 September 2020 August 2020 July 2020 June 2020 May 2020 April 2020 March 2020 February 2020 January 2020 December 2019 November 2019 October 2019 September 2019 August 2019 July 2019 June 2019 May 2019 April 2019 March 2019 February 2019 January 2019 December 2018 November 2018 October 2018 September 2018 August 2018 July 2018 June 2018 May 2018 September 2016 August 2016 April 2016 March 2016 December 2015

Subscribe

Email Address

Subscribe

Discover more from Tutorial

Subscribe now to keep reading and get access to the full archive.

Type your email…

Subscribe

Continue reading

Từ khóa » Html Form Block Enter Submit