text box input to 'live' text output if you get what i mean :)

[Dr Zoidberg]

i hope i can explain what i am after with this,

I want a text box on the web page that a user types numbers into, i can do this in most cases,

I then want some maths done with this number, not to difficult in most cases,

This is where i fall down

rather than the result being fed some where on the click of a button or some thing similar, i want an instant live display next to the text box,
So as the user types a result is appearing next to the box.

For example if the maths that have to be done are 'user number' + 5
and the user is going to type 15, once they type 1, then 6 will appear in the space next to the box, and then as they type the 5 for the 15 it changes the output to 20.

I have seen this sort of thing in use a few places but have no idea how it is done,

Does that make sense?

 

[voodooflux]

To achieve the desired result you'll either need to look at implementing the required logic using client-side Javascript, or the alternative is to look at using AJAX to post a request back to the server "behind-the-scenes" to perform the calculation and return the result to the client (there might be a slight delay in the result appearing using this method). Hope this makes sense.

 

[Dr Zoidberg]

Thanks voodooflux
Javascript had been the direction i was thinking so will continue with that,

I have not been having much luck with searching for anything such as code snippets or examples as i can not come up with a search term that is producing good results.

 

[HTMLHugo]

i did it very quickly like this

in the head of document

<script language=javascript type="text/javascript">
function calculate()
{
document.all.box2.value = parseInt(document.all.box1.value) + 5;
}
</script>


in the main page

<form id="form1" runat="server">
<div>
<input id="box1" onkeyup="calculate()"/>
<input id="box2" />

</div>
</form>

hopefully this will help point in the right direction.

 

[Dr Zoidberg]

i did it very quickly like this

in the head of document

<script language=javascript type="text/javascript">
function calculate()
{
document.all.box2.value = parseInt(document.all.box1.value) + 5;
}
</script>


in the main page

<form id="form1" runat="server">
<div>
<input id="box1" onkeyup="calculate()"/>
<input id="box2" />

</div>
</form>

hopefully this will help point in the right direction.

Thank you,
I will take a look at that later, and try to adjust it to what i need.