javascript - 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: /

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 );
});

Here is my code: https://jsfiddle/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 );
});

Share Improve this question asked Aug 18, 2016 at 15:35 T K 6281 gold badge7 silver badges20 bronze badges

Add a ment |

8 Answers 8

Sorted by: Reset to default 6

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);
});

jsFiddle

$("input[name='firstname'], input[name='lastname']").keyup(function() {
	var $fnVal = $("input[name='firstname']").val(),
  	$lnVal = $("input[name='lastname']").val();
  
  $("#username").text( $fnVal + "." + $lnVal);
});

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span id="username"></span><br/><br/>
<input type="text" name="firstname" /><br/><br/>
<input type="text" name="lastname" />

This is how I'd tackle it: https://jsfiddle/benhull/qun74mwc/23/

function updateText(){
    $("#username").text( $("input[name='firstname']").val() + "." + $("input[name='lastname']").val() );
}

$("input[name='firstname']").keyup(updateText);
$("input[name='lastname']").keyup(updateText);

Give ids to the input fields (ex. same as their names) and then edit your js to:

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

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

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

see https://jsfiddle/qun74mwc/25/

Style Note: This will make your code a lot more professional and stop autoplete from spamming mobile users by zooming in users to the point they can't even see what they type in the form fields, plus remember to take note of the previous posts in order to form what you are looking for.

Make sure to style your HTML input side to something like this:

<form autoplete="off">
  First Name:<br><input type="text" name="first_name"><br>
  Last Name:<br><input type="text" name="last_name"><br>
</form>

<form autoplete="off">
  First Name:<br><input type="text" name="firstname"><br>
  Last Name:<br><input type="text" name="lastname"><br>
</form>

You can also use a CDN for loading jQuery without having to download it directly such as:

<head>
<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>

Just use variables.

var $username = $("#username");
var firstName = '';
var lastName = '';

$("input[name='firstname']").keyup(function() {
  firstName = this.value;
  renderUsernameSpan();
});

$("input[name='lastname']").keyup(function() {
  lastName = this.value;
  renderUsernameSpan();
});

function renderUsernameSpan(){
        $("#username").text( firstName + '.' + lastName );
}

try this, this is what you want I think

<html>
<head></head>
<title></title>
<script src="https://ajax.googleapis./ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<body>


first name : <input type="text" id="firstname">
last name :<input type="text" id="lasttname">

<h3 class="display"></h3>

</body>

<script type="text/javascript">

$(document).ready(function(){
   $("#firstname, #lasttname").on('keyup keydown',function(){
      $(".display").text("");

      var firstname = $("#firstname").val();
      var lasttname = $("#lasttname").val();
      var fullname = firstname+"."+ lasttname;
      //alert(fullname);
      $(".display").append(fullname);
   });
});

</script>

</html>

Try this, I just changed you code a lil

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

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

Your code UPDATED

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744398866a4572284.html

javascript - access html input in real time an display in html-element - Stack Overflow

8 Answers 8

发表回复

评论列表（0条）

联系我们

400-800-8888

javascript - access html input in real time an display in html-element - Stack Overflow

8 Answers 8

相关推荐