Question

I’m trying to copy one form <input> field value to another form using jQuery. Simple, right? Well I must be doing something wrong as my code isn’t working. Here’s what I’ve got:

HTML:

<form id="form1">
  <input id='one' type='text' />
  <input id='two' type='text' />
</form>

<form id="form2">
  <input id='three' type='text' />
</form>

<input type='button' id="do" value="Copy" />

jQuery:

$('#do').click(function() {
  $('#3').html($('#1').html().val());
});

My overall goal is to get 3 to be populated with the value from 1 as soon as it’s entered, which I can presumably do by binding it to onBlur.

What am I doing wrong?

EDIT: Updated ID names as I wasn’t using numbers (but realised that you can’t/shouldn’t) use numbers for HTML elements.

Answer 1

This should fix it:

$('#do').click(function() {
  $('#3').val($('#1').val());
});

To update it constantly:

$('#1').keyup(function() {
  $('#3').val($(this).val());
});

Or, you can use blur to update when the user moves focus away:

$('#1').blur(function() {
  $('#3').val($(this).val());
});

I put these all on a jsfiddle so you can play around with what works best.

http://jsfiddle.net/cefpp/5/