5

How can we do like the bottom, the simple way ?

enter image description here ?

it updates when we change the input.

Jacob Relkin
  • 161,348
  • 33
  • 346
  • 320
Adam Ramadhan
  • 22,712
  • 28
  • 84
  • 124

2 Answers2

8

Say you had the following HTML:

<input type="text" id="textbox"/>

<span>http://twitter.com/<span id="changeable_text"></span></span>

Your JS would listen for the keyup event.

$('input#textbox').keyup(function() {
   //perform ajax call...
   $('#changeable_text').text($(this).val());
});
Jacob Relkin
  • 161,348
  • 33
  • 346
  • 320
  • 2
    or use the .keyup, .keypressed functions if you want changes to happen as they are typed, the .change will only fire once the focus is lost. – Patrick Evans Feb 13 '11 at 07:20
6

Just attach to the keyup event of that textbox and update a span accordingly.

The textbox and span

<input type="text" id="txt-url-suffix" />
<div>Your public profile: http://www.twitter.com/<span id="url-suffix" /></div>

And some simple jQuery

var $urlSuffix = $("#url-suffix");
$("#txt-url-suffix").keyup(function() {
    var value = $(this).val();
    $urlSuffix.text(value);
});
Marko
  • 71,361
  • 28
  • 124
  • 158