Combine the values of two fields in real-time on a Model-View-Controller Edit form

One challenge I am facing is within an MVC Edit form that contains two fields named ExVAT and VAT. I would like to introduce a new field that displays the total of these two values.

Currently, the total only reflects the sum of the two fields upon initial loading of the form. However, if either of the fields is edited, the total does not dynamically update to reflect the new combined value.

For instance, in the screenshot provided:

Although I have modified the Ex.Vat figure from 22 to 32, the total has not been recalculated (I will address formatting once the value is correct).

The current code used to calculate the total is as follows:

@Html.Raw(Model.Vat + Model.ExVat)

What approach would be most effective in ensuring that the total field automatically updates as adjustments are made to the other fields?

javascriptc#asp.net-mvc

Answer №1

JS Bin: https://jsbin.com/7ufimudozo/edit?html,js,output

<div>
    <div><input id="valueA" type="text" value="1"></div>
    <div><input id="valueB" type="text" value="2"></div>
    <div id="result">
</div>

<script>
    var valueA=$('#valueA');
    var valueB=$('#valueB');
    var result=$('#result');

    function calculateSum() {
      result.html(parseInt(valueA.val()) + parseInt(valueB.val()));
    }

    $(function() {
      calculateSum();
      valueA.change('change', calculateSum);
      valueB.bind('change', calculateSum);
    });
</script>

Answer №2

Implement jQuery input event for property changes

jQuery('#Ex.vat', '#vat').on('input propertychange paste', function() {
$('#Total').val($('#Ex.vat').val()+$('#vat').val());

});

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 Angular Date Pipe is displaying an incorrect date after processing the initial date value

Utilizing Angular's date pipe within my Angular 2 application has been beneficial for formatting dates in a user-friendly manner. I have successfully integrated API dates, edited them, and saved the changes back to the API with ease. However, an issue ...

javascriptangulartypescriptdate-pipe

Updating a particular value within a JSON file

I'm searching for a method to locate a specific json value by its name and set it to null. The json file's structure can vary, it is not always consistent. Let's assume the json appears like this: [ { "id": "1111", ...

c#json.netlinq

Issues with Node AssertionErrors cause failures to be silent and prevent proper error output

I am facing an issue with a particular method in my code. The code snippet is as follows: console.log('Trouble spot here') assert(false) console.log('Will this show up?') Upon running this code within my application, the followi ...

javascriptnode.jsexpressassertassertions

Formatting dates in a C# MVC application after parsing JSON

I am working on an MVC application that retrieves data from a SQL database and passes it to a view. One of the views contains a Kendo grid that displays the data, including a date column. The date data is stored in the SQL database as DateTime, while the m ...

javascriptjsonajaxdatetime

JavaScript's POST method is failing to fetch data from the API, yet it is able to retrieve data successfully in

I am experiencing issues when trying to retrieve data from an API using JavaScript. The API works fine in Postman, but it is not functioning properly in JavaScript. When I run the code, the console displays an error message stating "Failed to fetch respon ...

javascriptajaxpostmanfetch-api

The front end button stubbornly refuses to comply and redirect to another page

I am having trouble getting my button element to redirect my page to another page. I have tried using an onclick function inside the button tag with window.location.href, as well as creating a separate function for the redirect, but nothing seems to be wor ...

javascripthtmlcssbutton

Utilizing NextJS to retrieve cookie data within React components

Currently, I am working with a Next.js frontend and an Express backend. For authentication, I am utilizing cookies and have set up protected routes using Next.js middleware. The next step in my project involves accessing the cookie response within React ...

javascriptreactjscookiesnext.js

The image is experiencing difficulty loading from the Express static directory

Having some trouble with image loading... I've noticed that images are loading fine from the local folder, but not from the uploads folder which is set to be static. I've been attempting to upload a file from the browser. The upload and save pr ...

javascriptreactjsimageexpressfilepath

Transferring data only once specific agreements have been fulfilled

Imagine having a file with specific promises that, when executed sequentially, create an input file called input.txt. // prepareInput.js var step1 = function() { var promise = new Promise(function(resolve, reject) { ... }); return p ...

javascriptnode.jspromise

Why does my Observable remain perpetually unfulfilled?

I recently started learning javascript and came across the Angular 2 Documentation where I discovered that Promises can be replaced with Observables. While experimenting with a simple code, I noticed that in addition to the expected result, I am also getti ...

javascriptangularangular2-servicesangular-promiseangular2-observables

Is it possible to import a class from a different project or module in TypeScript?

I am attempting to modify the build task in Typescript within this specific project: https://github.com/Microsoft/app-store-vsts-extension/blob/master/Tasks/app-store-promote/app-store-promote.ts I am looking to incorporate an import similar to the one be ...

javascriptrubytypescriptnpmtypescript2.0

Error: Attempting to access property of undefined variable

I have searched for similar titles related to my issue, but I still haven't found a solution. The error I am encountering when clicking on agent_dashboard on the side panel is as follows: txtDisplayName = <div style="border:1px solid #990000;paddi ...

javascriptphpjquery

Changing the i18n locale in the URL and navigating through nested routes

Seeking assistance to navigate through the complexities of Vue Router configurations! I've dedicated several days to integrating various resources, but have yet to achieve successful internalization implementation with URL routes in my unique setup. ...

javascriptvue.jsvue-routervue-i18n

When should one close a custom-built jQuery dropdown menu?

I created a simple dropdown using a <div> (parent), <span> (current selection), and <ul> (options) which is functioning properly. Now, I'm looking to enhance it by implementing a feature that allows the dropdown to close when the use ...

javascriptjquery

Utilize the body tag to divide elements in ReactJS

Is there a way to assign different body tags to specific components? For example, I want to apply one body tag to the dashboard component and a different one for the sign up page component. ...

javascripthtmlcssreactjs

If I don't utilize dependency injection in Angular, it prompts me for arguments

Attempting to implement a service like this but encountering some issues translateService = new TranslateService(); An error message pops up stating that there are 9 missing arguments. However, when I modify it to look like this constructor(private trans ...

javascriptangulartypescriptdependency-injection

The Hidden Power of jQuery: Unleashing the Full Potential of .text()

I'm trying to make two values equal, but it's not working... var rowID = $("#@idSelectObjectGuid").val(); $($(".ls-grid-body tr").children("<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="240a64524770454648410a74564d ...

javascriptjquerytext

An issue with Axios request in a cordova app using a signed version

Currently, I am in the process of developing a Cordova application utilizing Axios and React. The interesting part is that everything runs smoothly when I build the app with Cordova and test it on my phone using the APK. However, once I sign, zipalign it, ...

javascriptandroidreactjscordovaaxios

Attempting to showcase a list of 4 concatenated items in a dropdown menu sourced from the database

I am attempting to concatenate and display 4 items in a dropdown list using AJAX. For example, the value in the dropdown list should appear as (127, CoilWt, 1, KGS) from the database. In the database, I am selecting select CODE_VALUE, CODE_DESC, CODE_SUB ...

javascriptc#jqueryasp.netado.net

"The sliding function of the React Bootstrap carousel is malfunctioning as it goes blank just before transitioning

Here is the code snippet I am working with: Whenever the carousel transitions to the next image, the current image disappears before displaying the next one. I am using react-bootstrap version 5.1.0, but it seems like there may be an issue with the transi ...

javascriptcssreactjscarouselreact-bootstrap