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

How can one access a specific element by its id that is located within an ng-template in Angular 6?

I have a question regarding accessing a button element inside an ng-template tag using its id in the TypeScript file. How can I accomplish that without encountering undefined errors? This is what I have tried so far: HTML <ng-template #popup > ...

How can I use JavaScript to find a keyword on a webpage that is not located within an <a> tag or its href attribute?

I'm on a mission to locate a specific keyword within a webpage. Sounds simple, right? Well, here's the tricky part - I need to disregard any instances of this keyword that are nested within an <a> tag. For example: <p>Here is some s ...

How to Use jQuery to Validate an Empty Array Object in JSON

My array seemed a bit different. It was empty like this: {"18":[]} In contrast, other JSON objects appeared like this: { "223": [ { "virtuemart_state_id": "1", "state_n ...

ensure that only one option can be selected with the checkbox

Can someone help me with applying this code on VueJS? I tried replacing onclick with @click but it's not working for me. I'm new to VueJS, so any guidance would be appreciated! function onlyOne(checkbox) { var checkboxes = document.getElement ...

Tips for choosing multiple values from a dropdown menu in Bootstrap CSS version 3

I'm looking to implement a way to select multiple values from a dropdown menu without using the CTRL key. Currently, I am utilizing Bootstrap CSS for styling. Here is the code for my dropdown: <select multiple class="dropdown-menu"> ...

"Exploring the Power of jQuery Validation in the User Experience

Struggling with the decision of when to display error messages in my form validation process. Below is my code, where currently the input fields are being validated on BLUR event, which seems reasonable. However, I am faced with a challenge - I want the v ...

Customizing the appearance of a submenu header on a WordPress website

I need assistance in creating a sub-menu style. Please refer to the image linked below for guidance: Here is my website link: ...

Utilize Tailwind CSS in React to dynamically highlight the active navigation item on click

Check out my navigation bar code: <nav className="bg-white shadow dark:bg-gray-800"> <div className="container flex items-center justify-center p-6 mx-auto text-gray-600 capitalize dark:text-gray-300"> <Link ...

differences in opinion between JavaScript code and browser add-ons/extensions

As the owner and developer of an e-commerce website, I find that potential customers often contact us regarding ordering issues. Upon investigation, we consistently discover that the problem is caused by JavaScript errors. We frequently check their browse ...

Steps on how to set the values of a select option based on a JSON parsed array

After receiving an array from a JSON call, I am trying to populate a select element with the data. {1:Android, 2:IOS, 3:Business Management Systems, 4:Database, 5:Codes/Scripts, 6:Others} or 1: "Android" 2: "IOS" 3: "Business Management Systems" 4: "Da ...

Unable to pass an Array to the Controller

let formData = new FormData(); payloadData = JSON.stringify(payload.unitDoctors); for (var prop in payloadData) { formData.append(prop, payloadData[prop]); } axios({ method: "put", url: apiUrl + payload.id, data: formData }) .then(resp ...

Python: parsing comments in a cascading style sheet document

I am currently working on extracting the first comment block from a CSS file. Specifically, I am looking for comments that follow this pattern: /* author : name uri : link etc */ and I want to exclude any other comments present in the file, such as: /* ...

What is the method for displaying map tooltips by default rather than on mouseover?

Currently, I have a script set up to display a map with two markers. Whenever I hover over one of the markers, a popup tooltip appears with location information. My question is, how can I make the information appear by default without needing to hover ov ...

CORS headers present but AJAX request still fails

A request sent via AJAX from a locally hosted page to a remote server is encountering errors, despite the presence of CORS headers. The JavaScript code for this request is as follows: $.ajax({url: 'http://prox.tum.lt/420663719182/test-upload?Action=S ...

Perform an action when the timer reaches zero

I am working with a database entry that contains the following information: { _id:"fdjshbjds564564sfsdf", shipmentCreationTime:"12:17 AM" shipmentExpiryTime:"12:32 AM" } My goal is to create a timer in the front end ...

leafletjs: render Points of Interest (POIs) using canvas technology

I am looking for a way to efficiently draw multiple geo points using Leaflet and HTML5 canvas. My data source is geoJSON, but according to the documentation of Leaflet, drawing geo positions as canvas is currently not supported. var anotherGeojsonLayer = ...

In the node.js application, the route for serving static images from the "/uploads/images" directory using express.static has been found to be dysfunctional

The following Route in my node.js server app API, deployed on the server for fetching images, is not functioning correctly app.use("/uploads/images", express.static(path.join("uploads", "images"))); However, the path below is working perfectly fine app.us ...

In PhantomJS, where is the location of the "exports" definition?

Consider the following code snippet from fs.js: exports.write = function (path, content, modeOrOpts) { var opts = modeOrOptsToOpts(modeOrOpts); // ensure we open for writing if ( typeof opts.mode !== 'string' ) { opts.mode = ...

What is the best method for transferring an array from PHP to JAVASCRIPT using AJAX and JSON?

Could use some assistance here. It seems like I am receiving a string instead of an array. After passing the array, which is the result of a SQL query from PHP to JavaScript through AJAX, I want to loop through the array and populate certain fields in a fo ...

Optimizing web content for iOS Safari with min-height media queries

I'm currently working on a Bootstrap-based photo browser that needs to have a responsive 4:3 aspect ratio. To achieve this, I have implemented the following approach: #carousel { width: 320px; height: 240px; ... } Additionally, I utilize media ...