form onChange [Solved]

[devnull]

Is it possible to have an event trigger when any element in a form is changed whilst still maintaining the existing onChange() events which have already been binded to any input in the form ?

Thanks

[jarry]

Please download the patch from http://www.jeasyui.com/download/downloads/jquery-easyui-1.4.1-patch.zip. This patch adds 'onChange' event to the form plugin.

Code:

$('#ff').form({
  onChange: function(target){
    console.log(target);
  }
});

[devnull]

Wow ! thanks so much.

I just included the js patch into the page (renamed to eui.form.onchange.js), but it does not appear to fire, is there anything else I need to do ??

Code:

<script src="js/jquery-easyui-1.4.1/jquery.easyui.min.js" type="text/javascript">
<script src="js/jquery-easyui-1.4.1/eui.form.onchange.js" type="text/javascript">

$.extend($.fn.form.defaults, {

  onChange: function(target){
    console.log(target);
  }

})

[jarry]

Before using the 'onChange' event, you have to create the form component programmatically or add 'easyui-form' class to the <form> element.

Code:

$('#ff').form({
  //...
});

[devnull]

Hi;

Thanks, yes I know that, I have several dozen pages all with forms that are working perfectly.

But what I am trying to achieve is to have some default action that will be taken unless a form has an override of the default setup.

Can this be done ?

[jarry]

Override the $.fn.form.defaults.onChange to define the default behavior.

Code:

$.extend($.fn.form.defaults, {
	onChange:function(t){
		console.log('form onChange')
	}
})

You can also override the 'onChange' on the specified form.

Code:

<form class="easyui-form" data-options="
		onChange: function(t){
			console.log('overriden onChange')
		}
		">
	<input class="easyui-textbox">
</form>

[devnull]

Thanks, yes that's what I have already.

I can get it to fire when I attach to a specific form, but it does not appear to fire when using the eui extend defaults.

[jarry]

If you want to let the both 'onChange' events to be triggered, please try to override the form plugin.

Code:

(function($){
	var plugin = $.fn.form;
	$.fn.form = function(options, param){
		if (typeof options == 'string'){
			return plugin.call(this, options, param);
		} else {
			return this.each(function(){
				plugin.call($(this), options, param);
				var opts = $(this).form('options');
				var onChange = opts.onChange;
				if (onChange && onChange != $.fn.form.defaults.onChange){
					opts.onChange = function(t){
						$.fn.form.defaults.onChange.call(this, t);
						onChange.call(this, t);
					}					
				}
			});
		}
	};
	$.fn.form.methods = plugin.methods;
	$.fn.form.defaults = plugin.defaults;
	$.fn.form.parseOptions = plugin.parseOptions;
})(jQuery);

[devnull]

Sorry, I got distracted and have been working on other issues.

Code:

$.extend($.fn.form.defaults, {
	onChange:function(t){
		console.log('form onChange')
	}
})

This does not fire at all in my system, does it fire in yours ??

[jarry]

Please try the attached example 'test.html'.

[devnull]

Hi Jarry;

This is a REALLY useful feature thanks so much for adding it, will it be part of the standard code ??