jQuery Update Input While Typing In Another Input Field

559 Views

This tutorial will show you how to update text in one input field while typing in another. This can also be used with textarea fields.

In our example pictured below, I am typing in the First Name field and the same text should be in the Name Preference field.
Figure 1.
Screen Shot 2016-06-16 at 7.49.12 PM

Step 1
Create both input fields and assign each a unique id.

<input type="text" name="title" id="title-field">

<input type="text" name="sub_title" id="sub-title">

Step 2
Add the following jQuery codes that will add the text on keyup

jQuery( document ).ready(function( $ ) {

$('#title-field').keyup(function() {
  $('#sub-title').val($(this).val());
});

});

That’s it. Leave a comment and also follow us on Twitter @westernstudios

Please Post Your Comments & Reviews

Welcome to Western Studios

We provide professional website and mobile softwares including Joomla, Wordpress and more.