CODEWITHSUNDEEP
jquery
Benedict John Payot
Benedict John Payot

Reputation: 33

How do I get the value of a textbox after it changes in jQuery?

So I'm trying to get the value of a textbox after it changes. Textboxes are blank, and when the user makes an input, it automatically multiplies to the value set. What I want is to get the computed value so that I can add all the value of each textboxes. I hope you can help me with this one.

Edit: I created this for testing. It's not working.

<!DOCTYPE html>
<head>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
        <title>Test</title>
</head>

<body>
<input id="first" type="text" onchange="compute()">

<script>
$('#first').on('change', function() {
    $(this).val($(this).val() * 3);
});
</script>

<input id="second" type="text" onchange="compute()">

<script>
$('#second').on('change', function() {
    $(this).val($(this).val() * 3);
});
</script>


<input id="result" type="text" readonly>

<script>
        function compute(){
                var myBox1 = document.getElementById('first').value;
                var myBox2 = document.getElementById('second').value;
                var result = document.getElemetById('result').value;
                var grade = first + second;
                result.value = grade;
        }
</script>


</body>
</html>

Upvotes: 2

Views: 4431

Answers (5)

nem035
nem035

Reputation: 35501

First of all, you probably need to close your input tags <input ... />

This is one way you can achieve what you want using jQuery. One thing you should check if the value inputed is a valid number. Also, you need to take into account each input separately so the result stil gets calculated even if only one value is inputed.

$('#first').on('change', function() {
    $(this).val($(this).val() * 3);
    compute();
});

$('#second').on('change', function() {
    $(this).val($(this).val() * 3);
    compute();
});

function compute() {
    var first = parseInt($('#first').val());
    var second = parseInt($('#second').val());
    var result = 0;
    if(!isNaN(first)) {
        result += first;
    }
    if(!isNaN(second)) {
        result += second;   
    }
    if(result != 0) {
        $('#result').val(result);
    }
}

Here is a working fiddle example

Upvotes: 0

iCollect.it Ltd
iCollect.it Ltd

Reputation: 93631

Don't mix attribute based events with jquery. You do not need them. jQuery allows multiple handlers per element and also keeps the code together (better than having an attribute buried elsewhere in the HTML).

http://jsfiddle.net/TrueBlueAussie/8o2z0agw/1/

$('#first').on('change', function () {
    $(this).val($(this).val() * 3);
    compute();
});

$('#second').on('change', function () {
    $(this).val($(this).val() * 3);
    compute();
});

function compute() {
    var first = ~~$('#first').val();
    var second = ~~$('#second').val();
    var result = $('#result');
    var grade = first + second;
    result.val(grade);
}

You also wanted to use jQuery selectors in preference to getElementById and use .val() to get.set values.

Note: ~~ is a faster shortcut for converting values to ints (instead of parsetInt).

As the code is indentical for the two change handlers, you can combine them into one:

$('#first,#second').on('change', function () {
    $(this).val($(this).val() * 3);
    compute();
});

If your jQuery code is included prior to the elements (which it sounds like it now is), you need to enclose it in a DOM ready handler to ensure the elements are found when the selector runs.

$(function(){
    $('#first,#second').on('change', function () {
        $(this).val($(this).val() * 3);
        compute();
    });
});

Note: $(function(){}); is a shortcut for $(document).ready(function(){});

An alternative to DOM ready is a delegated event handler, attached to document, which does not require a DOM ready handler as the jQuery selector is run at event time and document always exists at any time during page load.

$(document).on('change', '#first,#second', function () {
    $(this).val($(this).val() * 3);
    compute();
});

This works by listening for an event (e.g. change( bubbling up to the target element (document in this case), then applying the jQuery selector to the chain of bubbling elements only, then applying the function to the matching elements that caused the event. This means a delegated event can work with elements that may exist "later".

Upvotes: 3

Babak Behzadi
Babak Behzadi

Reputation: 1256

Try this:

$('#first').change(...)

change event will be called after the element is unfocused, so if you want to get the value of the element during typing, try

$('#first').keyup(...)

here is a complete sample:

<!DOCTYPE HTML>

<html>

<head>
  <title></title>
  <script src="jquery.min.js" type="text/javascript"></script>
  <script type="text/javascript">

  $(document).ready(function(){
      $("#tst").change(function(){
        console.log($(this).val());
      });

      $("#tst").keyup(function(){
        console.log($(this).val());
      });
  });
  </script>
</head>

<body>
 <input type="text" id="tst">
</body>

</html>

Upvotes: 0

David Thomas
David Thomas

Reputation: 253506

My own take, while you've already accepted an answer, is:

$('input[type=text]').on('change', function() {
  $(this).val(function(i, v) {
    return parseInt(v, 10) * 3;
  });
  compute();
});

function compute() {
  $('#result').val(function() {
    return $('input[type="text"]').not(this).map(function() {
      return parseInt(this.value, 10) || 0;
    }).get().reduce(function(a, b) {
      return a + b;
    });
  });
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<input id="first" type="text" />

<input id="second" type="text" />
<input id="result" type="text" readonly>

References:

Upvotes: 2

Alex Char
Alex Char

Reputation: 33238

One very simple solution to achieve this with jquery is:

$('#first, #second').on('change', function () {
    $(this).val($(this).val() * 3);
    if ($("#first").val() != "" && $("#second").val())
        $("#result").val(parseInt($("#first").val(), 10) + parseInt($("#second").val(), 10));
    
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="first" type="text" />
<input id="second" type="text" />
<input id="result" type="text" readonly="true" />

Upvotes: 2

Related Questions