Validate input field the second it gets a value

Question

Using wp's upload function, I've got users able to upload an image, this sends to S3 and returns a url, and input's this into #imgurl

#imgurl will be a hidden field and I'm trying to get JavaScript to work out once an image has been uploaded to display a message - The problem I have is getting it to check when #imgurl has a value

<div class="input-group">
    <label for="imageurl">
    <input type="text" name="imageurl" id="imageurl"  size="36"  placeholder="http://" />
    <input id="imageUpload" class="button" type="button" value="Upload Image" />
</div>

I thought it could be done with setInterval but I'm a little lost from this point.

I can work out most other stuff with JS but this has stumped me

var intervalID = window.setInterval(isFieldEmpty, 60000);

function isFieldEmpty() {
  // run field check code here?
  console.log("yes/no");

}

Thanks :D

Answer 1

This should work for you:

document.getElementById('imageurl').addEventListener('change', function() {
 if (this.value !== this.getAttribute('placeholder')) {
   console.log('The value has changed to ' + this.value);
 }
});

Answer 2

Just use:

document.getElementById(imgurl).value

or $("#imgurl").val() in jQuery.