最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Calculate values of textboxes automatically using jQuery - Stack Overflow

programmeradmin2浏览0评论

I want to calculate the value of the 1st 2 text boxes without a mand 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 pute. 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=".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>

I want to calculate the value of the 1st 2 text boxes without a mand 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 pute. 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./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>
Share Improve this question edited Oct 17, 2014 at 10:42 MarcoL 9,9893 gold badges39 silver badges50 bronze badges asked Oct 17, 2014 at 10:00 kristyan markeskristyan markes 371 gold badge2 silver badges8 bronze badges 3
  • What you need is Javascript and possibly AJAX. – rr- Commented Oct 17, 2014 at 10:02
  • Maybe you should read a javascript tutorial, this is really basics. – Leto Commented Oct 17, 2014 at 10:05
  • can you give me some examples? or can you share a link pls? – kristyan markes Commented Oct 17, 2014 at 10:08
Add a ment  | 

1 Answer 1

Reset to default 0

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

<script src="http://ajax.googleapis./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./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>
发布评论

评论列表(0)

  1. 暂无评论