3 * To make a form auto submit, all you have to do is 3 things:
5 * ctools_add_js('auto-submit');
7 * On gadgets you want to auto-submit when changed, add the ctools-auto-submit
8 * class. With FAPI, add:
10 * '#attributes' => array('class' => array('ctools-auto-submit')),
13 * If you want to have auto-submit for every form element,
14 * add the ctools-auto-submit-full-form to the form. With FAPI, add:
16 * '#attributes' => array('class' => array('ctools-auto-submit-full-form')),
19 * If you want to exclude a field from the ctool-auto-submit-full-form auto submission,
20 * add the class ctools-auto-submit-exclude to the form element. With FAPI, add:
22 * '#attributes' => array('class' => array('ctools-auto-submit-exclude')),
25 * Finally, you have to identify which button you want clicked for autosubmit.
26 * The behavior of this button will be honored if it's ajaxy or not:
28 * '#attributes' => array('class' => array('ctools-use-ajax', 'ctools-auto-submit-click')),
31 * Currently only 'select', 'radio', 'checkbox' and 'textfield' types are supported. We probably
32 * could use additional support for HTML5 input types.
35 Drupal
.behaviors
.CToolsAutoSubmit
= {
36 attach: function(context
) {
37 // 'this' references the form element
38 function triggerSubmit (e
) {
40 if (!$this.hasClass('ctools-ajaxing')) {
41 $this.find('.ctools-auto-submit-click').click();
45 // the change event bubbles so we only need to bind it to the outer form
46 $('form.ctools-auto-submit-full-form', context
)
47 .add('.ctools-auto-submit', context
)
48 .filter('form, select, input:not(:text, :submit)')
49 .once('ctools-auto-submit')
50 .change(function (e
) {
51 // don't trigger on text change for full-form
52 if ($(e
.target
).is(':not(:text, :submit, .ctools-auto-submit-exclude)')) {
53 triggerSubmit
.call(e
.target
.form
);
58 var discardKeyCode
= [
75 // Don't wait for change event on textfields
76 $('.ctools-auto-submit-full-form input:text, input:text.ctools-auto-submit', context
)
77 .filter(':not(.ctools-auto-submit-exclude)')
78 .once('ctools-auto-submit', function () {
79 // each textinput element has his own timeout
82 .bind('keydown keyup', function (e
) {
83 if ($.inArray(e
.keyCode
, discardKeyCode
) === -1) {
84 timeoutID
&& clearTimeout(timeoutID
);
88 if ($.inArray(e
.keyCode
, discardKeyCode
) === -1) {
89 timeoutID
= setTimeout($.proxy(triggerSubmit
, this.form
), 500);
92 .bind('change', function (e
) {
93 if ($.inArray(e
.keyCode
, discardKeyCode
) === -1) {
94 timeoutID
= setTimeout($.proxy(triggerSubmit
, this.form
), 500);