Simulate a button click event when a textbox is selected and the enter key is pressed

I am facing an issue with 2 textboxes and 2 buttons that are linked in a specific way (first textbox-first button/second textbox-second button). When a user enters text in the first textbox and presses enter, it should activate button1. Similarly, when the user focuses on the second textbox and presses enter, it should activate button2. I have attempted a solution but unfortunately, it is not working as expected.

document.getElementById('<%=txtYonSif.ClientID%>').addEventListener("keyup", function (evente) {
        evente.preventDefault();
        if (event.keyCode === 13) {
            document.getElementById('<%=btnPanelYonetici.ClientID%>').click();
        }
    });
    document.getElementById('<%=txtKulSif.ClientID%>').addEventListener("keyup", function (event) {
        event.preventDefault();
        if (event.keyCode === 13) {
            document.getElementById('<%=btnPanelKullanici.ClientID%>').click();
        }
    });

Answer №1

If you're not utilizing jQuery, opt for element.dispatchEvent(). However, if you have access to jQuery, go with the trigger() method.

Implementing dispatchEvent in JavaScript

var event = new MouseEvent('click', {
    view: window,
    bubbles: true,
    cancelable: true
});

var myButton = document.getElementById('button_id');
myButton.dispatchEvent(event);

Utilizing trigger in jQuery

$("#button_id").trigger('click');

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Problem: Toggle functionality not working properly in JavaScript

As a beginner, I am facing an issue with multiple toggle buttons. They work fine individually, but when nested within each other, only one toggle button works. After some research, I realized that I need to make adjustments to my JavaScript code. However, ...

It appears that there is a slight hiccup in the code when JavaScript is implementing the line skip functionality for the condition

Currently, I am working on a textbook exercise that involves the classic 99 Bottles of Beer on the wall JavaScript program. However, this assignment does not come with any examples or answers for reference. Despite searching online for assistance, the code ...

The onsubmit() form isn't working as intended

I have developed a JavaScript function to control the required input texts in my form. However, I am facing an issue where the error message does not appear when clicking the button without filling out the required field, and it allows me to navigate to an ...

Unable to get the div to properly follow when scrolling, even when using the fixed position attribute

My webpage is divided into two sections - left and right. I've used divs to create the left navigation and right content. However, when scrolling down the page, only the right portion scrolls while the left navigation remains fixed. I'm looking ...

using angularjs to dynamically apply css styles

Below is the input I have: The HTML code is shown below: <input type="number" ng-class="{negative: amount < 0}" ng-model="amount"/> This is the corresponding CSS code: .negative { color: red; } If the amount is positive, no specif ...

Converting Java 8 LocalDate to a JavaScript Date object

Can you help me with converting a Java LocalDate to a JavaScript Date? Here is the data I have: { "date": { "year": 2016, "month": "NOVEMBER", "dayOfMonth": 15, "monthValue": 11, "dayOfWeek": "TUESDAY", ...

Utilize mongoose for searching based on nested document attributes

In my current project, I have a database of documents where each one contains arrays that reference other documents in the same collection. My goal is to query this collection for documents in which the nested arrays contain a specific property. To clarify ...

The project's target is lower than the required .NET Framework version when utilizing the 'System.Web.dll' library

My .NET Project is throwing an error that says: The .NET Framework version required by assembly 'System.Web.dll' or one of its dependencies is higher than the project target .NET Framework version. Do you want to add this reference to your proje ...

Embedding Razor HTML RadioButtons within an image

Seeking guidance on how to tackle a task involving formatting an HTML page. Imagine having an image in the shape of a circle and needing to position 7 radio buttons around it. While it may be achievable using a dev object, this method appears overly comple ...

ASP.net Literal or Page altering HTML code string, leading to formatting challenges

We offer a unique service that utilizes word templates and a third-party library to generate detailed reports. These reports are returned in the form of HTML strings, which may not be aesthetically pleasing but are accurately formatted within the string it ...

Even though I have set Vue.config.silent=true, it continues to display warning information

https://i.sstatic.net/mlZS5.png When testing the Vue.config.silent by using Vue.set(a,4) to trigger a warn message, I noticed that even when setting Vue.config.silent=true, the warning information is still being printed. You can find the code here. Howev ...

How can I access the value of a textbox located in the footer row of a gridview control using JavaScript?

Below is the code snippet for a gridview in an aspx page, where the gridview is placed inside a form tag. <Grdview:GridViewExtended ID="GridView1" runat="server" AutoGenerateColumns="False" CssClass="Grid" onpageindexchanging="GridView1_Pa ...

Increase the number of elements every time a button is clicked

I have 5 buttons, and each button click will add its respective element. My concern is that when I go back to a previous button, only the elements up to that point should be shown. For example: If I click on button 5, it shows 5 added elements. If I then c ...

Using a phone number input within a React form

It seems like my form is functioning properly without the PhoneInput, but I'm unsure if it can be integrated into the form. There are no error messages, however, the handleChange function does not seem to work with the PhoneInput component. It only a ...

The package.json could not be parsed due to an error

I am currently facing an issue while trying to deploy a JavaScript Node.js project on Heroku. Everything works fine on localhost, but upon uploading, I encounter an "unable to parse" error at : ... "engines" : { "node" : ">0.11.9" }, ... The Error Mes ...

Attempting to extract a text string from a chunk of HTML code

My goal is to extract a text string (specifically, an article title) from a snippet of HTML code. The title in question reads "Journalist Allegedly Spied on Zoom Meetings of Rivals in Hilariously Dumb Ways." The challenge lies in the fact that the title d ...

"Enhance your database by incorporating HTML link clicks through AJAX integration with PHP and MySQL

After browsing through similar questions and attempting to implement it on my website, I'm facing an issue where the expected functionality is not working as intended. When users click on a link, there is no response in the console, and the database r ...

Transform the jQuery UI Slider to be clickable rather than draggable

Currently using jQuery UI 1.10.3 and aiming to create a slider widget that is not draggable. The intention is for the user to click on specific values along the slider instead. I previously attempted using eventDefault in the slider's start method, b ...

Choose all or none of the items from the list with a single click - v-list-item-group

I am interested in incorporating Vuetify's v-list-item-group component into my Vue application. This list is intended to represent nodes that are related to a graph, allowing users to select none, some, or all of them and delete the selected nodes. T ...

What is the best way to insert a Json array into distinct table rows?

I'm struggling to properly format my json data. My goal is to separate each product and display them in their individual rows. The issue I'm facing is that all the "name" values are being grouped into a single table row rather than each having t ...