"Troubleshooting the issue with the jQuery function not being able to trigger a

When I press the enter key in an input field, I want to be able to select options from a searchable dropdown menu. However, this functionality is not working and the alert message I set up is also not functioning as expected.

<div class="form-group m-form__group row">
                <label class="col-form-label col-lg-2">Tags</label>
                <div class="col-8">
                    <select class="form-control m-bootstrap-select" id="add_tag" data-live-search="true" name="tags">
                        <option value="1">tag</option>
                    </select>
                </div>
            </div>

How can I achieve this functionality? The code snippet I am using is not producing the desired results.

$(document).ready(function () {
        $('#add_tag').keypress(function (e) {
            var key = e.which;
            if(key == 13)
            {
                alert(123);
            }
        });
 });

Answer №1

Connect your select element to keydown events:

$(document).ready(function () {
    $('#add_tag').bind('keydown', function(event) {
        switch(event.keyCode){
           case 13:
               alert(123);
               break;
           default:
               break;
        }
    });
});

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

Ways to modify the jquery script to display on page load rather than on scrolling action

Currently in the process of working on my site, www.runebs.dk. Utilizing a script to activate information for each project. JS.. $('.showHide').on('click',function(){ $(this).toggleClass('active'); $( '#subHead ...

Ensure that a synchronous action is performed prior to each Backbone HTTP request

For each authenticated request (GET, POST, etc) in my Backbone/Marionette application, it is necessary to include an accessToken. The accessToken and expireDate are stored in the localStorage. To verify if the accessToken has expired, I utilize the metho ...

Error encountered when attempting to add headers to a request, resulting in an HTTP status code

Encountering difficulties when making get requests to a server with headers set using Axios/http request. Adding any header (excluding the content-type header) triggers the same error: "Response for preflight has invalid HTTP status code 405." This issue p ...

What happens when the user closes a notification in GetUIkIt 3?

Is there a way to detect when a UIKit notification has been closed? The UIkit notification plugin () mentions that it has a close event. Can this be utilized for notifications triggered programmatically as shown below? e.g. UIkit.notification({ mess ...

Tips on utilizing toggleClass to display only the currently active item and obtaining the active class name

I am new to Jquery and CSS/scss and I have successfully created a dynamic boostrap card that resembles a record player. The goal is to generate multiple boostrap cards based on the data in DB, but for simplicity, I am showing only 2 examples below. My ques ...

Creating a full-width navbar in Bootstrap 4 using the container-fluid

Looking for assistance with making a Bootstrap navbar fill the entire width of a container-fluid using only CSS, as I do not have access to the HTML code. It works outside the container-fluid but can someone help me achieve the same result within the con ...

Using dryscrape for web scraping: encountering an issue when selecting a radio button with CSS

I am attempting to extract data from a dynamically updated table on a webpage using dryscrape. The web page in question is located at . My code functions correctly with tables that are generated when the page is loaded initially. However, I now need to upd ...

Steps to extract a portion of a URL and display it in the "src" attribute

Here is the URL: My Code: (please refer to the JS comments for instructions on how to complete steps 2 and 3) <script> function mdlbox() { //step 1: Show the modal box var y = document.getElementsByClassName('modalDialog'); ...

Ways to position loading animation in the center and create a lightbox effect for the rest of the page

I have implemented a custom loader in CSS with the following styles: .loader { border: 16px solid #f3f3f3; /* Light grey */ border-top: 16px solid #3498db; /* Blue */ border-radius: 50%; width: 80px; height: 80px; animation: spin 2s linear inf ...

Strategies for resolving the module not found error: Unable to locate '@mui/icons-material/Adb'?

I installed material-ui core using the command below: npm i @material-ui/core However, when running my reactjs code afterwards, I encountered this error message: Module not found: Can't resolve '@mui/icons-material/Adb' Can someone pleas ...

Validating usernames with parsley (version 2.8.1) using php

Despite reading all the documentation on the Parsley Js website, I am still struggling to understand how to set up custom validation based on AJAX responses. My specific challenge is to validate a username and check if it already exists in the database. I ...

What is the best way to compare an array with comma-separated values in JavaScript?

I have a scenario where I have two arrays, one for categories and the other for products. Each product contains multiple categories as a comma-separated string. My goal is to match a specific category with each product's product_category value and the ...

Struggling to retrieve Ajax data and assign it to a PHP variable?

My Code Snippet is: <script> $(document).ready(function(){ $(".states").on('click','option',function(){ var selectedValue = $("select[id='stateId'] option:selected").val(); $.post('<?p ...

Optimizing Bootstrap for Tablet Browsing in Internet Explorer

Hey there, I have a question regarding Internet Explorer and tablets. As I revamp this website and integrate Bootstrap into it, my focus is currently on the small-sized IE browser for tablets. My dilemma arises from not knowing if there are any tablets th ...

When using Sequelize.or, only the first result is returned instead of returning all results

Currently, I am integrating SequelizeJS(MySql) with Passportjs for authentication. When I try the following code: User.find(db.Sequelize.or({ 'username': username }, { 'email': req.body.email }) ) .then((user) => {consol ...

Performing AJAX request when a link is clicked within a Wordpress website

I am looking for a way to initiate a PHP function in my Wordpress site when a link is clicked, rather than using a form submission. I have tried using an AJAX request but it doesn't seem to be working. Any suggestions would be greatly appreciated. Be ...

PHP MySQL Form EditingWould you like to edit forms

Hi, I'm facing an issue with my edit form and despite trying to solve it, I haven't been successful. Can anyone assist me in resolving this error? The specific error that I am encountering is from the initial code snippet which reads: "Notice: Un ...

To activate two separate click events, one for an absolute element and another for the element positioned behind it, simply click on the desired absolute element to trigger both actions

Is it possible to trigger click events for both of these elements? position: relative container ELEMENT 1: standard div ELEMENT 2: position: absolute div In real life, element 2 is a transparent backdrop designed to capture clicks on top of the header ...

Unable to iterate through array using jQuery promise (when > then) due to issues with $.each and $.ajax

I have been experimenting with different approaches and searching for solutions without success. Currently, I am working with an array of users: var arr = ['tom', 'sally', 'jill', 'sam', 'john']; My goal ...

Ensure uniform height for images in the absence of specific dimensions

Is there a solution to ensure that images of different sizes have the same height on a card? The issue is that the content is dynamic and coming from a CMS, so I don't know in advance what the image size will be or how much text will be in the card. & ...