0

I have this code which puts the content of my input fields into a preview div area:

JS

function fieldPreview() {
$('.input').on('keyup', function() {
    $('#' + $(this).data('id')).html(this.value);
});
}

HTML 

<input class="input" type="text" name="title" placeholder="Job Title" data-id="title">
<div id="title"></div>

My issue comes from the fact that two of my input fields are a little more complicated. One field uses google map autosuggest. When I click on the autosuggestion link it updates the text field but doesn't update the preview in the div until I actually modify the input manually by adding or removing another letter.

Is there a better way in jquery to monitor changes in an input field? This will allow me to put the contents of the field into the div even if it has been put there by javascript rather than a keyup.

Here is an example of jquery clearing the contents of the input field but it not being reflected in the DIV: http://jsfiddle.net/xDA9p/5/

J.Zil
  • 2,397
  • 7
  • 44
  • 78
  • possible duplicate of [Detect all changes to a (immediately) using JQuery](http://stackoverflow.com/questions/1948332/detect-all-changes-to-a-input-type-text-immediately-using-jquery) -- make sure to read the comments about detecting changes through JS. – Felix Kling Jul 11 '13 at 10:41
  • Basically there is no event that is triggered when the value is changed via JavaScript. After the value you changed, you have to trigger the event handler "manually". – Felix Kling Jul 11 '13 at 11:18
  • See also [Why does the jquery change event not trigger when I set the value of a select using val()?](http://stackoverflow.com/q/4672505/218196). – Felix Kling Jul 11 '13 at 11:19
  • @FelixKling could you explain to me how to trigger it manually? – J.Zil Jul 11 '13 at 11:26
  • I don't know how the autosuggestion works, but maybe there is some kind of "completion" or "select" event which gets fired when the value was changed. You'd have to listen to those events and then call `$('.input').trigger('keyup')` (for example) to trigger the event handler. – Felix Kling Jul 11 '13 at 11:33

1 Answers1

1

Use the change paste keyup input events.

$('.input').on('change paste keyup input', function() {
  $('#' + $(this).data('id')).html(this.value);
});
Eric
  • 18,532
  • 2
  • 34
  • 39