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

Question

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?

javascript c#asp.net-mvc

Answer 1

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

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 3

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());

});

Answer 4

Implement jQuery input event for property changes

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

});

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

Answer №1

Answer №2

Similar questions

Dealing with unsuccessful tests and progressing in C# using Selenium and SpecFlow

Tips for incorporating the multiply times async function into mocha tests

Is there a way for me to store the retrieved information from an API into a global variable using Node.js?

Merging the `on('click')` event with `$(this)`

Display the QWebEngineView page only after the completion of a JavaScript script

Issue with VueJS instance: Unable to prevent default behavior of an event

Dealing with multiple occurrences of forward slashes in a URL

Tips for transferring large data without a page redirect using jQuery's post method:

Building basic objects in TypeScript

Steps for accessing the controller scope from a directive nested within another directive:

The splash screen fails to show up when I launch my Next.js progressive web app on iOS devices

Unable to load the file or assembly 'Newtonsoft.Json.Net35

Encountering errors while attempting to render MUI components in jsdom using react testing library within a mocha test

Enhance your website's performance by optimizing Javascript page loading time when using

Discrepancy between Laravel Vue: console logging Axios POST response and network response apparent

Tips for accessing a composition function in VueJS from another composition

Implementing various event listeners for asynchronous JavaScript and XML requests (

Error encountered with NodeJS Express Module: TypeError - Unable to access property 'finished' as it is undefined

What is the alternative to using document.getElementById?

Effortless method to handle package.json configurations