Skip to content

Instantly share code, notes, and snippets.

@jakejscott
Created November 23, 2012 02:33
Show Gist options
  • Save jakejscott/4133778 to your computer and use it in GitHub Desktop.
Save jakejscott/4133778 to your computer and use it in GitHub Desktop.
jQuery Foundation Form Button Disabler 0.0.1
;(function($, window, undefined) {
'use strict';
var $doc = $(document),
Modernizr = window.Modernizr;
$(document).ready(function() {
$.fn.foundationAlerts ? $doc.foundationAlerts() : null;
$.fn.foundationButtons ? $doc.foundationButtons() : null;
$.fn.foundationAccordion ? $doc.foundationAccordion() : null;
$.fn.foundationNavigation ? $doc.foundationNavigation() : null;
$.fn.foundationTopBar ? $doc.foundationTopBar() : null;
$.fn.foundationCustomForms ? $doc.foundationCustomForms() : null;
$.fn.foundationMediaQueryViewer ? $doc.foundationMediaQueryViewer() : null;
$.fn.foundationTabs ? $doc.foundationTabs({ callback: $.foundation.customForms.appendCustomMarkup }) : null;
$.fn.foundationTooltips ? $doc.foundationTooltips() : null;
$.fn.foundationMagellan ? $doc.foundationMagellan() : null;
$.fn.foundationClearing ? $doc.foundationClearing() : null;
// My first foundation plugin!
$.fn.foundationFormButtons ? $doc.foundationFormButtons() : null;
$('input, textarea').placeholder();
// you can disable buttons on a form
$('form.remove-from-cart').foundationFormButtons('disable') // disable a button
$('form.remove-from-cart').foundationFormButtons('enable') // enable a button
$('#add-to-basket').submit(function(e) {
e.preventDefault();
var $form = $(this);
$form.ajaxSubmit({
dataType: 'json',
success: function(response) {
if (!response.success) {
alert(response.message);
$form.foundationFormButtons('enable');
return;
}
// snip
}
});
});
});
// UNCOMMENT THE LINE YOU WANT BELOW IF YOU WANT IE8 SUPPORT AND ARE USING .block-grids
// $('.block-grid.two-up>li:nth-child(2n+1)').css({clear: 'both'});
// $('.block-grid.three-up>li:nth-child(3n+1)').css({clear: 'both'});
// $('.block-grid.four-up>li:nth-child(4n+1)').css({clear: 'both'});
// $('.block-grid.five-up>li:nth-child(5n+1)').css({clear: 'both'});
// Hide address bar on mobile devices (except if #hash present, so we don't mess up deep linking).
if (Modernizr.touch && !window.location.hash) {
$(window).load(function() {
setTimeout(function() {
window.scrollTo(0, 1);
}, 0);
});
}
})(jQuery, this);
/*
* jQuery Foundation Form Button Disabler 0.0.1
* Jake Scott
*
*/
;(function ($, window, undefined) {
'use strict';
var settings = {
}, methods = {
init : function() {
return this.each(function() {
// convention that looks form forms with data-disable attribute
$('form[data-disable]').submit(function() {
$(this).foundationFormButtons('disable');
});
});
},
disable : function() {
$.each(this.find('input[type="submit"],button'), function(index, el) {
var $button = $(el);
$button.attr('disabled', 'disabled');
$button.attr('data-enabled-text', $button.attr('value'));
var text = $button.attr('data-disabled-text');
if (text) {
$button.attr('value', text);
}
});
},
enable : function() {
$.each(this.find('input[data-disabled-text],button[data-disabled-text]'), function(index, el) {
$(el).removeAttr('disabled').attr('value', $(el).attr('data-enabled-text'));
});
}
};
$.fn.foundationFormButtons = function (method) {
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method) {
return methods.init.apply(this, arguments);
} else {
$.error('Method ' + method + ' does not exist on jQuery.foundationFormButtons');
}
};
})(jQuery, this);
<form id="add-to-basket" action="/basket/additem" method="post" class="custom" data-disable="">
<!-- add your form fields here --->
<input type="submit" name="addtobag" class="button" value="Add to Basket" data-disabled-text="Adding to Basket..." />
</form>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment