T K T K - 8 months ago 34
HTML Question

access html input in real time an display in html-element

i have two inputs, the one should contain the firstname and the other one the lastname of a new user. Now i want to display the username (firstname.lastname) on real time in a . But when i edit the second input, the whole text in the changes.

Here is my code: https://jsfiddle.net/qun74mwc/13/


<span id="username"></span><br/><br/>
<input type="text" name="firstname" /><br/><br/>
<input type="text" name="lastname" />


var $username = $("#username");

$("input[name='firstname']").keyup(function() {
$("#username").text( this.value + ".");

$("input[name='lastname']").keyup(function() {
$("#username").text( this.value );


When you do this:

.text( this.value )

You replace what's in the span with the current input's value. Instead, replace it with the entire calculated value. For which you need only one keyup handler at all:

$("input").keyup(function() {
    var formattedName = $("input[name='firstname']").val() + "." + $("input[name='lastname']").val();