How to change text element based on input text field in HTML using Javascript?

Question

Here's a copy of my code at: https://jsfiddle.net/5zLyyv94/

<h1 class="login-heading">
<a href="./index.html" class="lnk2">Join</a> us, 
<span id="initname">Luke</span>.</h1>
<form method="post">
<input type="text" name="first name" placeholder="First Name" required="required" class="input-txt" />
</form>

Basicially, i'm trying to change the name from Luke to whatever the person types into the field text for first name.

so say, they type in their first name as "Jason"

I want the span text for Luke to change from Luke to Jason.

Thanks in advance!

cssyphus · Accepted Answer · 2016-06-26 21:17:18Z

This should get you started (must click outside the field for update to happen):

$('input[name=first_name]').blur(function(){
  $('#initname').text( this.value );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<h1 class="login-heading">
<a href="./index.html" class="lnk2">Join</a> us, 
<span id="initname">Luke</span>.</h1>

<form method="post">
  <input type="text" name="first_name" placeholder="First Name" required="required" class="input-txt" />
</form>

You can also use the keyup() method to change the span text in real time:

$('input[name=first_name]').keyup(function(){
  $('#initname').text( this.value );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<h1 class="login-heading">
<a href="./index.html" class="lnk2">Join</a> us, 
<span id="initname">Luke</span>.</h1>

<form method="post">
  <input type="text" name="first_name" placeholder="First Name" required="required" class="input-txt" />
</form>

Or, after user stops typing for 1.2 seconds (1200 milliseconds):

pauseTime = 1200;

$('input[name=first_name]').keyup(debounce(function(event){
  $('#initname').text( this.value );
},pauseTime));

function debounce(fn, delay) {
  var timer = null;
  return function () {
    var context = this, args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function () {
      fn.apply(context, args);
    }, delay);
  };
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<h1 class="login-heading">
<a href="./index.html" class="lnk2">Join</a> us, 
<span id="initname">Luke</span>.</h1>

<form method="post">
  <input type="text" name="first_name" placeholder="First Name" required="required" class="input-txt" />
</form>

References:

https://remysharp.com/2010/07/21/throttling-function-calls

Raúl Martín · Accepted Answer · 2016-06-26 21:20:52Z

0

Without use external libraries: Differents ways to use onchange: http://www.w3schools.com/jsref/event_onchange.asp

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

I suppose you prefer onkeyup and I using one as a example:

html

<h1 class="login-heading">
  <a href="./index.html" class="lnk2">Join</a> us, 
  <span id="initname">Luke</span>.</h1>
<form method="post">
  <input type="text" onkeyup="changeText(this)" name="first name" placeholder="First Name" required="required" class="input-txt" />
</form>

js

function changeText(element) {
  document.getElementById('initname').innerHTML = element.value;
}

Example: https://jsfiddle.net/uaqrcc7a/

answered Jun 26, 2016 at 21:20

Raúl Martín

4,7293 gold badges26 silver badges43 bronze badges

Collectives™ on Stack Overflow

How to change text element based on input text field in HTML using Javascript?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related