Utilizing JavaScript to have the 'enter' key pressed on a specific textbox trigger the same function as the form button

Question

Utilizing JavaScript to have the 'enter' key pressed on a specific textbox trigger the same function as the form button

I have a form that consists of a textbox and a functioning submit button which executes a jQuery/AJAX function. I am looking to trigger the same function when the user selects the textbox and presses the 'Enter' key.

I attempted to set up the textbox to initiate the function, but encountered issues where either the text input stopped working entirely or the function was not properly called (e.g., it simply added a parameter to the URL and refreshed the page, rather than executing the intended function). How can I resolve this?

Below is the code for my form:

<form style="border: 1px solid;border-radius:5px;" >
    <div class="input-group mb-2 mr-sm-2 mb-sm-0">
        <input type="text" class="form-control" id="mytextbox" placeholder="ID #" name="parcel">
        <span class="input-group-btn">
            <button class="btn btn-success" id="btnSearch3" type="button" onclick="foo('parcel',document.getElementsByName('parcel')[0].value,'Wizard')">Search</button>
        </span>
    </div>
</form>

javascript

Answer 1

Answer №1

To execute JavaScript code after a form is submitted, the onsubmit event can be utilized.

If you wish to prevent the form from submitting in the usual manner, you can incorporate event.PreventDefault.

I have created a fiddle where I assigned an id to the form and implemented an onsubmit function for it. https://jsfiddle.net/qwza104q/.

In cases where both the button and form need to trigger the same function, it is recommended to eliminate the button's onclick attribute and include type="submit" instead.

Answer 2

To execute JavaScript code after a form is submitted, the onsubmit event can be utilized.

If you wish to prevent the form from submitting in the usual manner, you can incorporate event.PreventDefault.

I have created a fiddle where I assigned an id to the form and implemented an onsubmit function for it. https://jsfiddle.net/qwza104q/.

In cases where both the button and form need to trigger the same function, it is recommended to eliminate the button's onclick attribute and include type="submit" instead.

Answer 3

Answer №2

It's essential to configure the textbox to detect keypress events in order to validate input for ENTER key presses (keyCode 13).

Avoid using inline HTML event handlers (on...) as they:

Result in tangled code that is difficult to comprehend and encourages redundancy.
Create global anonymous wrapper functions around attribute values, impacting the this binding within the callback.
Do not adhere to the W3C Event Handling standards.

Instead, use

object.addEventListener("eventName", callback)

:

// Obtain DOM references:
var btn = document.querySelector("#btnSearch3");
var txt = document.querySelector("#mytextbox");
var parcel = document.getElementsByName('parcel')[0];

// Set up event handlers:
btn.addEventListener("click", doFoo);

txt.addEventListener("keypress", function(evt){
  console.log(evt.keyCode);
  // Validate for the ENTER key
  if(evt.keyCode === 13){
    doFoo();
  }
});

// Common function to be invoked by both handlers:
function doFoo(){
  console.log("Callback called.");
  //foo('parcel', parcel.value, 'Wizard');
}

<form style="border: 1px solid;border-radius:5px;" >
    <div class="input-group mb-2 mr-sm-2 mb-sm-0">
        <input type="text" class="form-control" id="mytextbox" placeholder="ID #" name="parcel">
        <span class="input-group-btn">
            <button class="btn btn-success" id="btnSearch3" type="button">Search</button>
        </span>
    </div>
</form>

Answer 4

It's essential to configure the textbox to detect keypress events in order to validate input for ENTER key presses (keyCode 13).

Avoid using inline HTML event handlers (on...) as they:

Result in tangled code that is difficult to comprehend and encourages redundancy.
Create global anonymous wrapper functions around attribute values, impacting the this binding within the callback.
Do not adhere to the W3C Event Handling standards.

Instead, use

object.addEventListener("eventName", callback)

:

// Obtain DOM references:
var btn = document.querySelector("#btnSearch3");
var txt = document.querySelector("#mytextbox");
var parcel = document.getElementsByName('parcel')[0];

// Set up event handlers:
btn.addEventListener("click", doFoo);

txt.addEventListener("keypress", function(evt){
  console.log(evt.keyCode);
  // Validate for the ENTER key
  if(evt.keyCode === 13){
    doFoo();
  }
});

// Common function to be invoked by both handlers:
function doFoo(){
  console.log("Callback called.");
  //foo('parcel', parcel.value, 'Wizard');
}

<form style="border: 1px solid;border-radius:5px;" >
    <div class="input-group mb-2 mr-sm-2 mb-sm-0">
        <input type="text" class="form-control" id="mytextbox" placeholder="ID #" name="parcel">
        <span class="input-group-btn">
            <button class="btn btn-success" id="btnSearch3" type="button">Search</button>
        </span>
    </div>
</form>

Utilizing JavaScript to have the 'enter' key pressed on a specific textbox trigger the same function as the form button

Answer №1

Answer №2

Similar questions

Having trouble invoking the Carousel function from react-bootstrap

Data stored in an array on one screen does not appear on another screen

Prevent automatic scrolling by clicking when you reach the bottom

What is the best method for removing a collection with AngularJS through a RESTful API?

What is the best way to delay a method in vue.js?

"Utilizing AngularJS to apply Filter two times within an ng-repeat loop

Ways to extract data from form inputs with the help of jQuery

use the abstract function(req, res, next) in a Node environment

Eliminate the ArrayOfObjects by filtering out the items with a specific ID

Concern regarding the duration setting in the date-picker

Jumping pages with JavaScript after updating an element through ajax请求

"Adding a delay to each item when using knockout.js to push items into an observable array

I would greatly appreciate your assistance in deciphering the JavaScript code provided in the book "Ajax in Action"

Using JWT for my React-Redux application's server side authentication

(Discord.JS) Bot failing to send direct message upon user joining the server

The functionality of the back button in a JavaScript website only allows users to navigate through their browsing

Efficient method for populating a table dynamically with JSON data using JavaScript

What is the best way to manage a new Error in Node.js while utilizing ES6 Symbols?

Comparison of Web Development Techniques: localStorage versus Cached HTTP

Avoiding the sudden appearance of unstyled content in Single-File Components