Execute with jQuery using Multiple Attribute Selector

I am attempting to input numeric values using a keyboard.

My issue is as follows: the keyboard has an "Accept" button, and I have multiple text fields. I want to assign a different action for each text field. I attempted to use multiple attribute selectors but it did not work.

<input id="txt1" type="text" /> </br>
<input id="txt2" type="text" /> </br>
<input id="txt3" type="text" /> </br>

$('input[type=text]').keyboard({
    layout: "num"
});

$('.ui-keyboard').on('click', 'input[name="key_accept"]',function() {
    alert('Accept button was clicked in text1');
    // do your stuff here
});

You can view the example on this link http://jsfiddle.net/Mils/W2xFX/25/

The alert message appears for all text fields, but I wish to have a different alert for each text field.

Answer №1

Because the component you are utilizing does not offer any event for accept and cancel functionalities, an external solution becomes necessary. One approach could involve saving the current element upon focus and utilizing it within the accept button event.

Check out this demo: http://jsfiddle.net/Z7GYH/12/

Snippet of code:

var currentElement = null;
$('input[type=text]').focus(function() {
    currentElement = this;
    return true;
});

$('input[type=text]').keyboard({
    layout: "special"
});

$('.ui-keyboard').on('click', 'input[name="key_accept"]',function(e, x) {
    alert('Accept button was clicked in ' + currentElement.id);
    // implement your logic here
});

Answer №2

http://jsfiddle.net/W2xFX/35/

Simply ensure you are monitoring the text box that is currently in use (the one that was last clicked on).

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

Tips for transferring information from a parent to a child controller in Angular using the $broadcast method?

I am trying to send an id argument to a child controller using Angular's $broadcast method, but despite my best efforts with the code below, I can't seem to make it work. Any suggestions on what might be incorrect in my implementation? ParentCtr ...

Why am I encountering an issue while trying to access req.user.id?

Having set up passport authentication on my express, node project, I encountered an error when trying to access req.user. The error message displayed is Property 'id' does not exist on type 'User'.ts(2339). Below is the relevant code sn ...

Is there a way to retrieve the sub-child menu data from a JSON file?

I am currently working on creating a horizontal menu from a json file. However, I am facing issues in retrieving the subchild elements properly. Below is an example of my json file: var data = [{ "menu":[ { "MenuId":1, ...

transform JSON structure into an array

Is it possible to convert an interface class and JSON file into a list or array in order to work on it? For example, extracting the Racename from each object in the JSON file and storing it in a list/array. Here is the interface structure: interface IRunn ...

Maintaining the position of the input cursor when using the arrow up and down keys in AngularJS directive

I am currently developing a custom "typeahead/autocomplete" directive. element.bind("keydown keypress", function (event) { if(event.which === 38 || event.which === 40) { var increment = event.which === 38 ? 1: -1; ... .. ...

Utilize jQuery's addClass Method when Submitting a Form Using Ajax

When the form is submitted, I would like to add a class and display a loading animation before executing the AJAX request. However, when setting async to false in the AJAX call, the AJAX request will be executed first before displaying the loading animatio ...

Saving JSON format in VueX State Management

I'm relatively new to using Vue/VueX and I am exploring methods for storing JSON data in the VueX state. Initially, it seemed like a simple task: state { jsonthing: { ... } } However, I encountered an issue where getters return an Observer type ins ...

Video background is malfunctioning on Firefox and Internet Explorer

Currently, I am facing some issues with the JQuery plugin 'videoBG'. The problem is that when I view the video offline, it works perfectly in all browsers. However, once I go online, the video stops working in FireFox and IE. It seems like the sc ...

How to effortlessly convert a JSON string into a JavaScript object

Hello everyone, I am working with DynamoDB and need to parse the JSON Object that is returned from a call in order to retrieve the password hash field. jsonString = JSON.stringify(data) console.log(jsonString) This is what the output looks like: {"Count ...

CSS tip: Create a trendy design by adding a slanted border to the last

I need help creating a unique menu list with a white border design. The borders should all be straight by default, except for the last border which must be slanted. ul { background-color: #183650; } li { list-style: none; display: inline-block; b ...

The radio button is not providing the necessary notification

I currently have the following elements on my webpage: Table rows that contain radio buttons A link labeled "Issue" that triggers a popup with one submit button A submit button labeled "details" that also triggers a popup The issue I am facing is as fol ...

What is the best way to integrate an image gallery with twitter bootstrap?

I'm having trouble implementing an image gallery on my index page. Despite my efforts, I can't seem to achieve the desired behavior. Here's a snippet of my code: .container .row .col-md-8.col-sm-8.col-xs-8 - 4.times do |i| ...

Ag-Grid: Matching colors with filtering functionality

Can AG-Grid be configured to highlight matching cells during quick filtering? For example, if I have the following data: [ { firstName: 'Tom', lastName: 'Doe', company: 'Tesla' }, { firstName: 'Tim', lastName: & ...

Tips for identifying if the cursor is hovering over the :before or :after section of an element

One of the challenges I am facing involves CSS and defining drop areas for users to interact with, allowing them to either drop a section before or after existing sections. .section:before, .section:after { content: "[insert here]"; height: 64px; ...

Issue with setting and showing the PHP data array within the vue.js variable

I am encountering an issue with transferring an array of data from a PHP session variable to a Vue.js variable Here is how I am trying to assign an array of data to a Vue.js variable: permissions:['<?php echo json_encode($_SESSION['permission ...

Having trouble getting a NodeJS sample app to start up because it can't locate the 'config' file?

I am currently delving into the world of Node.js and have been attempting to launch a sample application that I recently acquired from a git repository: https://github.com/madhums/node-express-mongoose-demo Despite diligently following all the provided i ...

Populating SVG element with information extracted from JSON

Hi there! I'm dealing with a JSON file that contains data for 249 countries, each with their respective iso codes. My goal is to declare the iso code as a variable named 'iso' and the number of visitors as a variable named 'visitors&apo ...

How to minimize the amount of typing needed when specifying grid positions in CSS Grid layout?

(I am currently in the process of upgrading the design of this data entry page from a basic CSS/HTML table layout to something more advanced, utilizing CSS Grid layout). Following common conventions, I have structured it into 12 columns. Each entry field ...

Looping through data in Vue.js with a specific condition

There is an object structured like this: groupedContacts: { 4: [ {name: 'foo'}, {name: 'bar'} ], 6: [ {name: 'foo bar'}, ] } Additionally, we have another array: companyList.models: models: [ ...

Implementing pagination and filtering in a single MERN controller

Is it possible to implement pagination and filtering in the same controller? Filter service:- const filterPosts = async (filterData, token) => { const config = { headers: { Authorization: `Bearer ${token}`, }, data: { ...