ToggleButton

Automatically enable or disable a button, add loading messages, or swap classes - all without the verbose Javascript.

Dependencies

ToggleButton requires the jQuery library. Please download the jQuery library and include it in the <head></head> of your html page.

Default Settings

Below are the default settings for ToggleButton. These settings will be thoroughly explained in the below sub-sections.

 
<script type="text/javascript" language="javascript">
$(function() {
	$('#btn').ToggleButton({		
		'loading_msg'	: '',
		'loading_class'	: ''
	});
});
</script>
	

Basic Implementation

A basic implementation of ToggleButton using the default settings where all form values are saved globally.

Once a button has been toggled, you can simply execute the toggle again to restore it to the enabled state.

 
<script type="text/javascript" language="javascript">
$(function() {
	$('#btn').ToggleButton();
});
</script>
	

This can also be used in the onclick event of an input button.

<input type="button" id="btn1" onclick="$(this).ToggleButton();" />
	

Advanced Example

Using the ToggleButton custom setting options, you can specify a custom loading message and/or a custom loading CSS class.

 
<script type="text/javascript" language="javascript">
$(function() {
	$('#btn').ToggleButton({		
		'loading_msg'	: 'Loading...',
		'loading_class'	: 'btn-loading'
	});
});
</script>