Merge pull request #366 from twalpole/form_attribute

support use of disable-with on elements using the html5 "form" attribute

Author: lucasmazza

src/rails.js

@@ -15,7 +15,7 @@
   if ( $.rails !== undefined ) {
     $.error('jquery-ujs has already been loaded!');
   }
-
+  
   // Shorthand to make it a little easier to call public rails functions from within rails.js
   var rails;
   var $document = $(document);
@@ -184,14 +184,21 @@
       form.hide().append(metadataInput).appendTo('body');
       form.submit();
     },
-
+    
+    // Helper function that returns form elements that match the specified CSS selector    
+    // If form is actually a "form" element this will return associated elements outside the from that have
+    // the html form attribute set
+    formElements: function(form, selector) {
+      return form.is('form') ? $(form[0].elements).filter(selector) : form.find(selector)
+    },
+    
     /* Disables form elements:
       - Caches element value in 'ujs:enable-with' data store
       - Replaces element text with value of 'data-disable-with' attribute
       - Sets disabled property to true
     */
     disableFormElements: function(form) {
-      form.find(rails.disableSelector).each(function() {
+      rails.formElements(form, rails.disableSelector).each(function() {
         var element = $(this), method = element.is('button') ? 'html' : 'val';
         element.data('ujs:enable-with', element[method]());
         element[method](element.data('disable-with'));
@@ -204,7 +211,7 @@
       - Sets disabled property to false
     */
     enableFormElements: function(form) {
-      form.find(rails.enableSelector).each(function() {
+      rails.formElements(form, rails.enableSelector).each(function() {
         var element = $(this), method = element.is('button') ? 'html' : 'val';
         if (element.data('ujs:enable-with')) element[method](element.data('ujs:enable-with'));
         element.prop('disabled', false);

test/public/test/data-disable.js

@@ -10,7 +10,8 @@ module('data-disable', {
 
     $('#qunit-fixture').append($('<form />', {
       action: '/echo',
-      method: 'post'
+      method: 'post',
+      id: 'not_remote'
     }))
       .find('form:last')
       // WEEIRDD: the form won't submit to an iframe if the button is name="submit" (??!)
@@ -21,6 +22,14 @@ module('data-disable', {
       href: '/echo',
       'data-disable-with': 'clicking...'
     }));
+    
+    $('#qunit-fixture').append($('<input />', {
+      type: 'submit',
+      form: 'not_remote',
+      'data-disable-with': 'form attr submitting',
+      name: 'submit3',
+      value: 'Form Attr Submit'
+    }));
   },
   teardown: function() {
     $(document).unbind('iframe:loaded');
@@ -100,6 +109,27 @@ asyncTest('form input[type=submit][data-disable-with] disables', 6, function(){
   }, 30);
 });
 
+asyncTest('form input[type=submit][data-disable-with] using "form" attribute disables', 6, function() {
+  var form = $('#not_remote'), input = $('input[form=not_remote]');
+  checkEnabledState(input, 'Form Attr Submit');
+    
+  // WEEIRDD: attaching this handler makes the test work in IE7
+  $(document).bind('iframe:loading', function(e, form) {});
+
+  $(document).bind('iframe:loaded', function(e, data) {
+    setTimeout(function() {
+      checkDisabledState(input, 'form attr submitting');
+      start();
+    }, 30);
+  });
+  form.trigger('submit');
+
+  setTimeout(function() {
+    checkDisabledState(input, 'form attr submitting');
+  }, 30);
+  
+});
+
 asyncTest('form[data-remote] input[type=submit][data-disable-with] is replaced in ajax callback', 2, function(){
   var form = $('form:not([data-remote])').attr('data-remote', 'true'), origFormContents = form.html();