0

I have several HTML input fields on a page. I would like to update the page based on what value is in the label. If the user types in the field and the value changes, I would like the page to change accordingly, without the user having to click some sort of "calculate" or "submit" button.

Is AJAX required here? Or is there a way to do this purely using some DOM manipulation + javascript state changes?

boisterouslobster
  • 1,283
  • 3
  • 25
  • 54

1 Answers1

0

http://jsfiddle.net/j1sjzmpm/

use onkeyup http://www.w3schools.com/jsref/event_onkeyup.asp

<input type="text" onkeyup="displayText(this);" value="" />
<div id="display"></div>

function displayText(x) {
    document.getElementById('display').innerHTML = x.value
}
aahhaa
  • 2,240
  • 3
  • 19
  • 30
  • `keyup` is a bad approach: fields can change in other ways different than keyboard (e.g. mouse). Listening to `change` or `input` events would be better. Moreover, w3schools is a bad resource, see [w3fools](http://w3fools.com), [MDN](https://developer.mozilla.org/en-US/docs/Web/Events/keyup) is much better. – Oriol Aug 14 '14 at 18:08
  • I try onChange, it will only display text after the input loose focus. how do i get around that. – aahhaa Aug 14 '14 at 18:10
  • Yes, [`change`](https://developer.mozilla.org/en-US/docs/Web/Events/change) event isn't immediate. You can use [`input`](https://developer.mozilla.org/en-US/docs/Web/Events/input) event instead. – Oriol Aug 14 '14 at 18:12
  • Yes, Thank you, I just realize that if i paste in a text, than the function won't fire. Thanks. – aahhaa Aug 14 '14 at 18:18