I am writing a custom jquery plugin that basically replicates the functionality of an input. I could explain why, but truthfully the explanation is quite long and I believe it to be irrelevant to the question.

The trouble es when I try to extend jQuery's .val() method to my custom jquery plugin. Here is what I've tried:

$.fn.custom_text_input = function(options){
    return this.each(function(){
        var custom_text_input = new CustomTextInput(options, this)

        $(this)[0].val = function(){
            alert('something useful')
        }
    })
}

Ive tried a few other variations of this, all to no avail. If anyone has any ideas that will work, I would very much appreciate the wisdom!

Thanks!

I am writing a custom jquery plugin that basically replicates the functionality of an input. I could explain why, but truthfully the explanation is quite long and I believe it to be irrelevant to the question.

The trouble es when I try to extend jQuery's .val() method to my custom jquery plugin. Here is what I've tried:

$.fn.custom_text_input = function(options){
    return this.each(function(){
        var custom_text_input = new CustomTextInput(options, this)

        $(this)[0].val = function(){
            alert('something useful')
        }
    })
}

Ive tried a few other variations of this, all to no avail. If anyone has any ideas that will work, I would very much appreciate the wisdom!

Thanks!

• javascript
• jquery

• Shouldn't the function definition go in your CustomTextInput definition? – Collin Grady Commented Sep 27, 2013 at 23:07
• I want to be able to call it from anywhere by using a jquery selector. example: $('#div').custom_text_input() and then somewhere else in my code $('#div').val() – Fred Garbutt Commented Sep 27, 2013 at 23:08
• 1 BTW, $(this)[0] is the same as this. When you create a jQuery object, there is a zero-index array of DOM elements in that jQuery object. So when you access the first index (zero) you get the first element. – Jasper Commented Sep 27, 2013 at 23:10
• 1 thanks. I tried both, but that's helpful for the future – Fred Garbutt Commented Sep 27, 2013 at 23:11
• the problem is i don't want to overwrite the original .val() method that applies to inputs. I really just want to write it to the elements that belong to my plugin – Fred Garbutt Commented Sep 27, 2013 at 23:15

2 Answers 2

To overwrite the $.val() method you need to do something like $.fn.val = function () {...}. Here is a demo: http://jsfiddle/CRRP5. I would remend saving the old .val() method in a variable so you can use it when .val() is called on a regular form input.

The only way you're going to get this to work is by extending the result of jQuery's val() method.

$(function(){
  $.fn.oldVal = $.fn.val
  $.fn.val = function(value){
    //I'm assuming here that you're setting/getting a data value
    //on the object to keep track of it's "custom value"
    if(value && $(this).data('custom-input-value')){
       return $(this).data('custom-input-value', value); 
    }
    else if(value = $(this).data('custom-input-value')){
      return value;
    }else{
      return value ? $(this).oldVal(value) : $(this).oldVal();
    }
  }


})

That might work for you :p

Here's a jsfiddle with it working: http://jsfiddle/Z4c6d/