T K T K - 3 months ago 9
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/

HTML:

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


Jquery:

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

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

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

Answer

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();
    $("#username").text(formattedName);
});
Comments