How to update a textbox on key press using JavaScript

Question

Is there a way to update the value of a textbox on every key press?

I'm doing currency conversion. So, there are two textboxes, one for the user to input the value while the other will automatically show the converted amount on every key press.

Should I use a for loop? But what should I loop?

The textboxes in the following for loop should be able to do its individual row conversion

<% for(int i=0; i<2; i++) { %>
 <td><input type="text" id= "amount" name="amount<%=i%>" /></td>

 <td><input type="text" id= "convertedAmount" name="convertedAmount<%=i%>" readonly/></td>
<%}%>

How should I get started in attempting this task?

Thanks in advance for any possible help.

use keypress event myInput.addEventListener('keypress', handler) — Jonathan de M.
– Jonathan de M., Commented Jun 14, 2013 at 3:03

Community · Accepted Answer · 2020-06-20 09:12:55Z

6

onkeyup is best suited for your task:

Type amount $: <input type='text' id='amount' onkeyup="updateConverted()" >
<br>
Converted: <input type='text' id='converted' >

JavaScript function:

function updateConverted() {
    var conversionRate = 1.5;
    document.getElementById('converted').value =
                       document.getElementById('amount').value * conversionRate;
}

Demo here.

Update (JSP `for` loop):

In the case of your for loop, you can just use the following jQuery code (no need to change the HTML):

$('input[name=amount]').each(function (_, value) {
    $(value).keyup(function () {
        var rate = 1.5;
        var convAmount = $(this).val() * rate;
        $(this).parent().next().children('input[name=convertedAmount]').val(convAmount);
    });
});

See demo here.

_{Note: Your for loop is generating duplicated IDs. If possible, avoid that as it is invalid HTML.}

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jun 14, 2013 at 3:06

acdcjunior

136k37 gold badges341 silver badges312 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user2435903 Over a year ago

this is great! it works! bt is there a way to make it work for textbox in a for loop too? thnks

acdcjunior Over a year ago

I saw the for loop at the question now. Do you still need it?

user2435903 Over a year ago

yes I still need the for loop. so is there a way for me to do that? thnks

user2435903 Over a year ago

i tried bt it doesnt seem to work for my for loop...no idea wheres the error... bt i shall try again. Thnks!

user2435903 Over a year ago

i believe this line is for storing the converted value into the convertedAmount textbox rite? $(this).parent().next().children('input[name=convertedAmount]').val(convAmount); However sadly it seems like this line is not working for me.. is there any other way to counter this issue? thnks!

skparwal · Accepted Answer · 2013-06-14 03:05:26Z

2

Simple using jQuery:

<input type="text" name="t1" id="t1" value="" onkeypress="calculation()" />

<input type="text" name="converted" id="converted" value="" />

<script>
function calculation() {
   var price = 'here is your formula';
   $('#converted').val(price);
}
</script>

answered Jun 14, 2013 at 3:05

skparwal

1,0746 silver badges15 bronze badges

2 Comments

exexzian Over a year ago

Better would be to use onkeyup

user2435903 Over a year ago

@skparwal this works for me as well! bt same as above is there a way to make it work for textbox in a for loop? I tried to use .each(function()) bt i dun think its working. Thnks

Collectives™ on Stack Overflow

How to update a textbox on key press using JavaScript

2 Answers 2

Update (JSP `for` loop):

5 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Update (JSP for loop):

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related

Update (JSP `for` loop):