Question

Is there way to associate a javascript function to a user control? Lets say I have a name control written in .ascx. Can I define a client side function, lets say .clear(), that would be associated to name control. The clear function would clear all the elements of that control. I know I can create clear() javascript function but that would be global javascript function, not necessarily tied to name control. I want to tie the function to name control so that given that I have reference to name object, I should be able to simply call that function from that reference something like:

name.clear();

I know this can be done using MS Ajax framework but was wondering if I can do something like that using jQuery.

Answer 1

If by “clear” you mean set the value of text/password inputs, textareas and select elements to an empty string, and set radio and checkboxes to !checked, then you can do something like this:

$("#someid").find('select,textarea,input[type="text"],input[type="password"]').val('');
$("#someid").find('input:radio,input:checkbox').prop('checked',false);

Or as a plugin:

(function( $ ) {
  $.fn.clearChildren = function() {
    this.find('select,textarea,input[type="text"],input[type="password"]').val('');
    this.find('input:radio,input:checkbox').prop('checked',false);
    return this;
  };
})( jQuery );

$("#someid").clearChildren();

Demo: http://jsfiddle.net/nnnnnn/AvfUz/

(jQuery does have an “:input” selector that selects all selects, textareas and inputs, but you don’t want to set the value of checkboxes and radios so they need to be done separately.)