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/

Join          


        

Answer 1

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

Answer 2

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/