Skip to content

Plugin Options

James Pederson edited this page May 24, 2014 · 13 revisions

All Options

I pulled from the best options plugin templates to provide the most flexible plugin possible. I still want to add more options, but here's a complete example with all the current default option values.

$( selector ).accrue({
  mode: "basic",
  operation: "keyup",
  default_values: {
    amount: "$7,500",
    rate: "7%",
    rate_compare: "1.49%",
    term: "36m",
  field_titles: {
    amount: "Loan Amount",
    rate: "Rate (APR)",
    rate_compare: "Comparison Rate",
    term: "Term"
  button_label: "Calculate",
  field_comments: {
    amount: "",
    rate: "",
    rate_compare: "",
    term: "Format: 12m, 36m, 3y, 7y"
  response_output_div: ".results",
    '<p><strong>Monthly Payment:</strong><br>$%payment_amount%</p>'+
    '<p><strong>Number of Payments:</strong><br>%num_payments%</p>'+
    '<p><strong>Total Payments:</strong><br>$%total_payments%</p>'+
    '<p><strong>Total Interest:</strong><br>$%total_interest%</p>',
  response_compare: "Save $%savings% in interest!",
  error_text: "Please fill in all fields.",
  callback: function ( elem, data ){}

Read on for more information about each of the options above.


The mode option has 3 settings: [basic]( Loan Calculator) (default), compare, or amortization.


The operation option has two settings: keyup and button.

The keyup, the default option, will do the calculation when the user changes a value in an input.

The button option forces a button to be displayed in the form that must be clicked in order to do the calculation.


The default_values option is used to set initial values for the fields in the form. Only affects fields generated by the plugin.


Add this section and adjust the values to override field labels on generated form elements. Only affects fields generated by the plugin.


Adjust the button_label property to set the text (and other HTML) to display on the button that the plugin generates. Only affects buttons generated by the plugin.


This property lets you add or modify the text that shows up below fields generated by the plugin. Only shows comments for fields generated by the plugin.


The selector for the div to which the plugin will output the response. Use this parameter if you need to output the response to a div that's not inside the calculator element and doesn't have a class of 'results'.


Adjust the message that displays when outputting mode: 'basic' calculations. Use %payment_amount%, %num_payments%, %total_payments%, and %total_interest% to tell the plugin where to put the calculation totals.


Adjust the message that displays when outputting mode: 'compare' calculations. Use %savings% to tell the plugin where to place the calculated total savings. You can also display information about either of the loans that were involved in the comparison:

  • %loan_1_payment_amount%
  • %loan_1_num_payments%
  • %loan_1_total_payments%
  • %loan_1_total_interest%
  • %loan_2_payment_amount%
  • %loan_2_num_payments%
  • %loan_2_total_payments%
  • %loan_2_total_interest%

The user loan information is found in loan_1_[...] and the comparison loan is in loan_2_[...].


Adjust the message that displays when any one of the inputs isn't populated.

callback( elem )

Provide a callback function with code to be executed whenever a calculation occurs. Use this to add animations to the divs or update a separate response div with your own formatted response. Here's an example of how you'd set up a callback:

  callback: function( elem, data ){
    if ( data===0 ) {
    } else {
      // find elements inside the calculator div, and do things with them.
      elem.find( ".results:hidden" ).slideDown( 300 );
      // dump the calculation info to console to learn how to use it.
      console.log( data );

Suggest New Options

If you have any requests for new options you'd like to see here, post an issue and I'd be happy to strongly consider adding them.

You can’t perform that action at this time.