Dynamic display of input values ​​using Javascript

Question

I have a form, and I want to dynamically display certain form elements as soon as they are filled.

Imagine if I had text input for your name. As you type, I also want your name to appear in another part of the web page.

How could I do this in the easiest way?

Answer 1

(See the update below, I realized later that I completely forgot to handle inserting text into the field with the mouse.)

You can connect the keypress event (you might also want keydown and keyup ) in the text input field and use it to start updating the DOM element elsewhere. For example:

 var nameField = document.getElementById('nameField'); nameField.onkeydown = updateNameDisplay; nameField.onkeyup = updateNameDisplay; nameField.onkeypress = updateNameDisplay; function updateNameDisplay() { document.getElementById('nameDisplay').innerHTML = this.value || "??"; } 

Living example

This is a very simple example of using an event handler like DOM0 (the onXyz property, which I usually don't like). The easiest way to do this is to use a library like jQuery , Prototype , YUI , Closure, or any of several others . They will smooth out the differences of the browser and allow you to focus on what you are actually trying to do.

Here above using jQuery:

 $('#nameField').bind('keydown keyup keypress', function() { $('#nameDisplay').html(this.value || "??"); }); 

Living example

---

Refresh . In fact, the above will skip things like pasting in a field with the mouse. You might think that the change handler would be good for this, but it does not necessarily work until the focus leaves the field, so it is often possible to use a synchronized process as follows:

JavaScript, no library:

 var nameField = document.getElementById('nameField'); var lastNameValue = undefined; updateNameDisplay(); setInterval(updateNameDisplay, 100); function updateNameDisplay() { var thisValue = nameField.value || "??"; if (lastNameValue != thisValue) { document.getElementById('nameDisplay').innerHTML = lastNameValue = thisValue; } } 

Living example

You want that you do not have a separate one for each field (instead, use one timer for all), and you will want to set the timer according to what you really need; - Be sensitive to the fact that when you do this, you consume resources. If you want to stop checking at some stage (and this is a good idea), save the return value from setInterval :

 var timerHandle = setInterval(updateNameDisplay, 100); 

... and stop the loop as follows:

 clearInterval(timerHandle); timerHandle = 0; 

---

Here is a more complete example of dynamically scanned fields, only using a timer to focus the field. I used jQuery for this example because it simplifies it and you asked for a simple one (if you use another library or don't use any library, you can probably port it easily, the main place of jQuery is useful in this case in finding inputs in the shape of):

 jQuery(function($) { var formTimer = 0, currentField, lastValue; updateWatchingIndicator(); $('#theForm :input') .focus(startWatching) .blur(stopWatching) .keypress(updateCurrentField); function startWatching() { stopWatching(); currentField = this; lastValue = undefined; formTimer = setInterval(updateCurrentField, 100); updateWatchingIndicator(); } function stopWatching() { if (formTimer != 0) { clearInterval(formTimer); formTimer = 0; } currentField = undefined; lastValue = undefined; updateWatchingIndicator(); } function updateCurrentField() { var thisValue; if (currentField && currentField.name) { thisValue = currentField.value || "??"; if (thisValue != lastValue) { lastValue = thisValue; $('#' + currentField.name + 'Display').html(thisValue); } } } function updateWatchingIndicator() { var msg; if (currentField) { msg = "(Watching, field = " + currentField.name + ")"; } else { msg = "(Not watching)"; } $('#watchingIndicator').html(msg); } });​ 

Real time example

Answer 2

Use javascript onkeypress event. Check out this w3schools page about this. Then you can use it to call a function that will update the dom element where you want to display the element. It should go something like this:

 <script type="text/javascript"> function update(element) { document.getElementById("dynamic_name").innerHTML = element.value; } </script> <input type="text" onkeypress="update(this)" /> <div id="dynamic_name"></div> 

You can obviously rename elements and move them, but this is a general concept.

Answer 3

A very simple and elegant solution would be to use AngularJS:

 <input type='text' ng-model='userText'/> <p ng-bind='userText'></p>