Press "Enter" to skip to content

Simple Calculator using jQuery Plugin with Bootstrap | MoneyPicker

Moneypicker is a standard Bootstrap money picker plugin that automatically calculates the total price based on the coins and banknotes you select.

simple calculator in jquery, jquery currency converter plugin, jquery plugins list, jquery calculator plugin, jquery calculator github, jquery plugin example

How to make use of it:

1. Load the necessary jQuery library and Bootstrap framework into the document.

<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/cdn/bootstrap.min.js"></script>

2. Download the MoneyPicker plugin files.

<link rel="stylesheet" href="./jquery.moneypicker.css" />
<script src="./jquery.moneypicker.js"></script>

3. Attach the money picker to an entry field.

<div class="input-group-prepend" data-toggle="popover" data-type="moneypicker" data-input="inputPrice" data-sign="1">
  <span class="input-group-text">Money Picker</span>
</div>
<input type="text" id="inputPrice" name="price" class="form-control" value="7" pattern="^(\d{1,6})(,\d{1,2})*(\.\d{1,2})?$" required autofocus />

4. Attach the included money picker to your payment page.

<table border="0" cellspacing="0" cellpadding="0">
  <tbody>
    <tr align="right">
      <td style="width: 800px;">
        <span class="amount" id="lblAmount"
              data-type="moneypicker"
              data-bills="[100, 50, 10]"
              data-coins="[2, 1, 0.5, 0.1, 0.05]"
              data-func='{"sign":"true","reset":"true"}'
              data-hf="hf"
              data-amount="lblAmount"
              data-credit="lblCredit"
              data-total="lblTotal"
              data-error="lblError"
              data-confirm="lblButton"
              data-container="container"
              data-min="0"
              data-max="250">5,00</span>
        <input name="hf" id="hf" type="hidden">
      </td>
    </tr>
    <tr style="height: 5px;"></tr>
    <tr align="right">
      <td><span class="credit" id="lblCredit">-7,00</span></td>
    </tr>
    <tr style="height: 1px;"></tr>
    <tr>
      <td>
        <hr style="margin: 0px;">
      </td>
    </tr>
    <tr align="right">
      <td>
        <span class="total" id="lblTotal"></span>
      </td>
    </tr>
    <tr style="height: 5px;"></tr>
    <tr align="right">
      <td id="container"></td>
    </tr>
    <tr align="right">
      <td>
        <span class="error" id="lblError"><br /></span>
      </td>
    </tr>
    <tr align="right">
      <td>
        <span class="btn btn-success" id="lblButton">Checkout</span>
      </td>
    </tr>
  </tbody>
</table>

5. Or display the money picker in a one-click popup.

<table border="0" cellspacing="0" cellpadding="0">
  <tbody>
    <tr align="right">
      <td style="width: 800px;">
        <span id="lblAmount2"
              data-type="moneypicker"
              data-hf="hf2"
              data-amount="lblAmount2"
              data-credit="lblCredit2"
              data-total="lblTotal2"
              data-sign="1">+8,00</span>
        <input name="hf2" id="hf2" type="hidden">
      </td>
    </tr>
    <tr style="height: 5px;">
    <tr align="right">
      <td><span class="credit" id="lblCredit2">+9,00</span></td>
    </tr>
    <tr style="height: 1px;">
    <tr>
      <td>
        <hr style="margin: 0px;">
      </td>
    </tr>
    <tr align="right">
      <td>
        <span class="total" id="lblTotal2"></span>
      </td>
    </tr>
  </tbody>
</table>

Easy Money Picker & Calculator In jQuery, MoneyPicker Plugin/Github


See Demo And Download

Official Website(ITformat): Click Here

This superior jQuery/javascript plugin is developed by ITformat. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *