Question

195

Calculate values of textboxes automatically using jQuery

rated 0 times [ 200] [ 5] / answers: 1 / hits: 16864 / 10 Years ago, fri, october 17, 2014, 12:00:00

I want to calculate the value of the 1st 2 text boxes without a command button
Example i have 3 text boxes.

The first 2, where the numbers will be inputed and the last 1 will be the sum or product and so on.
Now i want it to auto compute.
For example i have inputed values 2 and 3 on the 1st 2 text boxes then automatically the sum or product or whatever result will be displayed on the 3rd text box.
How am i able to do this? Thanks

    <html>

    <head>

    <script src=http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js></script>

    <script>

    $('#texttwo').keyup(function(){

    var textone;

    var texttwo;

    textone = parseFloat($('#textone').val());

    texttwo = parseFloat($('#texttwo').val());

    var result = textone + texttwo;

    $('#result').val(result.toFixed(2));

    });

    </script>

    </head>

    <body>

    <input type=text name=value1 id=textone>

    <input type=text name=value2 id=texttwo>

    <input type=text name=result id=result>

    </body>

    </head>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

mustafaericho

Add To Favorites

Follow

Total Points: 322

Total Questions: 103

Total Answers: 110

Location: Montenegro

Member since Thu, Jun 16, 2022

2 Years ago

mustafaericho questions

1 npm i Error: `gyp` failed with exit code: 1

Mon, May 31, 21, 00:00, 3 Years ago

1 Node js, process.env not reading enviroment variables

Sun, May 23, 21, 00:00, 3 Years ago

1 Webpack erroring on mini-css-extract-plugin loader

Sat, Feb 13, 21, 00:00, 3 Years ago

1 Webpack processAssets hook and asset source

Sat, Jan 2, 21, 00:00, 3 Years ago

1 what is the default AES config in crypto-js?

Thu, Nov 12, 20, 00:00, 4 Years ago

View All

answered 10 Years ago lucianod · Accepted Answer

You can achieve this by using jQuery.
Include jQuery in your project by putting this in your <head>

<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js></script>

Then, at the end of the file:

<script>

$('#texttwo').keyup(function(){

    var textone;

    var texttwo;

textone = parseFloat($('#textone').val());

texttwo = parseFloat($('#texttwo').val());

var result = textone + texttwo;

$('#result').val(result.toFixed(2));





    });

</script>

This will give you the result when ever you change the value of the second box.

You will need to do this, too:

Change

    <input type=text name=value1>

    <input type=text name=value2>

    <input type=text name=result>

to:

    <input type=text name=value1 id=textone>

    <input type=text name=value2 id=texttwo>

    <input type=text name=result id=result>

EDIT

This is my entire file:

<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js></script>





<input type=text name=value1 id=textone>

<input type=text name=value2 id=texttwo>

<input type=text name=result id=result>



<script>

    $('#texttwo').keyup(function(){

        var textone;

        var texttwo;

        textone = parseFloat($('#textone').val());

        texttwo = parseFloat($('#texttwo').val());

        var result = textone + texttwo;

        $('#result').val(result.toFixed(2));





    });

</script>