Benedict John Payot Benedict John Payot - 1 month ago 8
jQuery Question

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>

Answer

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".

Comments