Implementing a keypress function that can handle duplicate names

HTML

<input name="pm" type="text" value="0"/>
<input name="pm" type="text" value="0"/>
<input name="pm" type="text" value="0"/>

<input name="total" type="text" value="0" disabled="disabled"/>

Javascript

$('[name="pm"]').keypress(function() {

//implementation ?

});

I initially have three text boxes with a default value of 0. When the user enters any text in one of these three text boxes, the total should be displayed in the "total" text box. The key press event is functioning correctly for all three text boxes.

javascriptjqueryhtmlduplicates

Answer №1

Unique solution

Please take note: I have utilized the input event instead of keyup for achieving the desired result.

You can also utilize isPositiveNumeric and isNaNCheck functions by referring to this helpful resource: $.isPositiveNumeric vs. isNaN Explained. Kindly refer to the comments below as well, smiley face! B-)

Feel free to explore and experiment with this unique solution. Hope it brings assistance.

custom code snippet

$('input[name="pm"]').on('input', function() {
    var sum = 0;
    $('input[name="pm"]').each(function(){
        sum += parseInt(this.value);
    });
   $('input[name="total"]').val(sum);
});​

Answer №2

$('#pmInput').on('keypress', function() {
  var total = $('#totalInput');
  total.val(parseInt(total.val(), 10) + parseInt($(this).val(), 10));
});

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

The Vue component should trigger the display of data in a Bootstrap modal based on the row of the button that was

Here is a sample code snippet demonstrating how data is fetched from the database: <table class="table table-bordered"> <thead> <tr><th>User ID</th><th>Account Number</th><th>Accou ...

javascriptjqueryhtmlvue.jsvue-component

Using either Java or Groovy, iterate through a hashmap and showcase an HTML table within a Velocity template

Just a heads up: Some users may have trouble reading code comments. For the record, this is not related to any homework assignment. I'm attempting to combine HTML and a hashmap for the first time. Despite searching for explanations online, nothing see ...

javahtmlgroovyhashmapvelocity

Is there a way to modify the window's location without having to reload it and without resorting to any sne

Initially, I believed that the hash hack was a necessity, but after observing the recent updates from Facebook, my perspective has shifted. The original hash hack (not certain if this is the correct term) involved changing location.hash to save a state in ...

javascriptajaxfacebookurlhistory

Is it possible to generate grid options dynamically for various tables within AngularJS using ui-grid?

I have developed a service for ui-grid table functionality. Currently, I am able to use this service on a single page but now I want to extend its usage to multiple pages, each with different table data. How can I pass grid options and JSON data for multip ...

javascriptjqueryangularjshtml5-canvas

Trouble with ng-repeat when working with nested json data

Check out this app demo: http://jsfiddle.net/TR4WC/2/ I feel like I might be overlooking something. I had to loop twice to access the 2nd array. <li ng-repeat="order in orders"> <span ng-repeat="sales in order.sales> {{sales.sales ...

javascriptjsonangularjs

What advantages can be gained from having multiple package.json files within a single application?

Embarking on the journey of creating my inaugural full react web application entirely from scratch. Previously, I've mainly worked on assignments that were partially pre-made for me. While setting up my project, I couldn't help but notice that I ...

javascriptnode.jsreactjsnpm

Having trouble closing my toggle and experiencing issues with the transition not functioning properly

Within my Next.js project, I have successfully implemented a custom hook and component. The functionality works smoothly as each section opens independently without interfering with others, which is great. However, there are two issues that I am facing. Fi ...

javascriptreactjstypescriptnext.js

Substitute the images with links provided in an external text file

I have a function that I use to replace avatars of players with custom images. Currently, I have three replacement links hardcoded into a Chrome extension. However, I want the function to read an external txt file to dynamically build an array so that I ca ...

jqueryhtmljson

Contrast between the act of passing arguments and using apply with arguments

I have an important backbone collection that utilizes a save mixin to perform Bulk save operations (as Backbone does not natively support this feature). // Example usage of Cars collection define([ 'Car', 'BulkSave' ], function(Car ...

javascriptajaxfunctionbackbone.jsapply

The Challenges of Parsing HTML Source Code for Web Scraping

I've been attempting to scrape data from this website: (specifically rare earth material prices) using Python and BeautifulSoup. My query pertains not to Python, but rather the HTML source code of the site. When I utilize Firefox's "Inspect Elem ...

htmlcss

Keeping calculated values in the React state can cause issues

In an attempt to develop a component resembling a transferlist, I have simplified the process substantially for this particular issue. Consider the following example: the react-admin component receives two inputs - a subset of selected items record[source ...

javascriptreactjsreact-admin

What is the return value of the .pipe() method in gulp?

When using the code snippet below, what will be the input to and output of .pipe(gulpIf('*.css', cssnano()))? gulp.task('useref', function(){ return gulp.src('app/*.html') .pipe(useref()) .pipe(gulpIf('*.js&apo ...

javascriptnode.jsnpmgulpnpmjs

Transferring variables between vanilla JS and Angular 2: A guide

I am facing a challenge where I need to retrieve an object title from vanilla JavaScript and then access it in my Angular 2 component. Currently, I am storing the variable in localStorage, but I believe there must be a better approach. The issue arises wh ...

javascriptangularjsangular

Dealing with issues escaping unicode characters in JavaScript

Whenever I need to load data from an external file based on a specific event, I make use of the following jQuery code: $("#container").load("/include/data.php?name=" + escape(name)); An issue arises when the JavaScript variable "name" contains Unicode ch ...

javascriptjqueryloadescaping

Can this layout be achieved using DIV elements?

Struggling to create a unique HTML/CSS layout that extends beyond the center? Imagine a standard horizontally centered page, but with one div expanding all the way to the right edge of the browser window. This design should seamlessly adjust to window res ...

csslayouthtml

What is the best way to display the output after retrieving an array?

Database : --> product table P_id P_name P_uploadKey 1 Cemera 7365 2 Notebook 7222 3 Monitor 7355 4 Printer 7242 --> buy table B_id P_id B_nam ...

phphtmlsql

Setting a default date dynamically for v-date-picker in the parent component, and then retrieving the updated date from the child component

I'm working with a custom component that utilizes the v-date-picker in various instances. My goal is to have the ability to dynamically set the initial date from the parent component, while also allowing the date to be modified from the child componen ...

javascriptvue.jsvuetify.jsvue-props

Add an image to IFromFile in your ASP.NET Core MVC application

I'm looking to allow users to upload images, save them as IFormFile, and then store them in a database. Here's what I have so far: In the product controller, there is only an add action for both get and post methods, the product model, and the a ...

c#htmlasp.net-core-mvc

Errors in vue.js conditions

I am currently attempting to validate whether my variable is empty. Despite reviewing my code, I am facing issues with its functionality. My current version of vue.js is 2.5.13 Below you can find the snippet of my code: <template> <div v-if ...

javascriptvue.js

Discovering the Essence of AngularJS Test Runner: Unraveling the

I recently started learning Angular JS and decided to follow the tutorial here. I've encountered a roadblock in step 8 where I need to write a test to check if the thumbnail images are being displayed. The concept behind it is simple. There is a JSON ...

javascriptangularjsangularjs-e2e