Not able to track change in input value

Question

In the template I have a input element.

<input class='qq-edit-caption-selector qq-edit-caption kk-editing' placeholder='Enter Caption here ...' onkeypress='captionUpdate();'>

I want to track the change in the input value,and enable the Update button.Tried below options:

• onkeypress='captionUpdate();'
• Tried jquery change or click on the class

$('.qq-edit-caption').change(function() {
    alert('qq-edit-caption');        
});

Both options does not get fired up!!not sure I have anything issues with my setup or Fine Uploader does not allow that? Please see my screenshot:

Any way to solve this problem with FU?

Answer 1

This might get you started:

$('.inp input').keyup(function(){
   if (this.value.length > 0) {
     $(this).closest('.row').find('.cell.btn button.upload').prop('disabled', false);
   }else{
     $(this).closest('.row').find('.cell.btn button.upload').prop('disabled', true);
   }
});

* {position:relative;box-sizing:border-box;}
.row{overflow:hidden;}
  .cell{float:left;height:40px;}
    .pic{width:82px;}
    .inp{width:230px;}
      .inp input{font-size:1rem;padding:2px 5px;}
    .btn{width:60px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="row">
  <div class="cell pic">
    <img src="http://lorempixel.com/80/40">
  </div>
  <div class="cell inp">
    <input class='qq-edit-caption-selector qq-edit-caption kk-editing' placeholder='Enter Caption...'>
  </div>
  <div class="cell btn">
    <button class="upload" disabled>Upload</button>
  </div>
  <div class="cell btn">
    <button class="del" disabled>Delete</button>
  </div>
</div><!-- .row -->

Answer 2

If you are simply adding this inline event handler directly to the template element, then it's not surprising that it's never triggered. Fine Uploader templates are quite primitive in that the template is interpreted as an HTML string and then used to create DOM elements inside of your container element (the element referenced as your element option).

You really should never use inline event handlers. There are quite a few disadvantages to this approach. I talk about this in more depth in my book - Beyond jQuery. And the method of attaching event handlers is not necessary at all in your case, as far as I can tell. Instead, after constructing a new instance of Fine Uploader, simply attach an event handler of your choice to the input element using addEventListener. For example if your <input> element is given a CSS class name of 'qq-edit-caption', you can attach a "change" event handler like this:

var uploadContainer = document.querySelector('#my-uploader')

var uploader = new qq.FineUploader({
   element: uploadContainer
   ...
})

uploadContainer.querySelector('.qq-edit-caption')
  .addEventListener('change', function(event) {
      // event handler logic here...
   })

...and if you are creating this input element for each file and need to attach a "change" handler to all of these input elements, you should attach a single delegated event handler to the container element, and react based on the element that initially triggered the event (look at the target property of the event). You can determine the ID of the file by looking at the CSS class of the parent <li> of the event.target, or you can look for a 'qq-file-id' attribute on the parent <li> of the target element (the value will be the file ID). That code might look something like this:

var uploadContainer = document.querySelector('#my-uploader')

var uploader = new qq.FineUploader({
   element: uploadContainer
   ...
})

uploadContainer.addEventListener('change', function(event) {
      if (event.target.className.indexOf('qq-edit-caption') >= 0) {
         var fileId = parseInt(event.target.getAttribute('qq-file-id'))
         // ...
      }
   })

Answer 3

Have you tried the onchange event? Does it work?

<input class='qq-edit-caption-selector qq-edit-caption kk-editing' placeholder='Enter Caption here ...' onchange='captionUpdate();'>

Answer 4

You can enable and disable the state of button by the input value.Using the Keyup function

 $('.qq-edit-caption').keyup(function() {
       if(this.value.length > 0){
            $("#edit").prop('disabled', false);
       }
       else {
        $("#edit").prop('disabled', true);
       }
    });