Launch jQuery Calculator By Clicking input-group-addon

Question

I need to launch a jQuery calculator ( http://keith-wood.name/calculator.html ) when clicking the calculator icon to the right of the input field. The referenced calculator is great and has great documentation, but I guess I need someone smarter than me to figure out how to launch it when clicking the "fa-calculator" icon to the right of a field.

I've setup my form input field as follows. The calculator allows the use of a button to launch it, but it simply creates a button next to the field, which isn't what I'm after.

Thank you!

<div class="input-group">
    <span class="input-group-addon">A</span>
    <input name="a" id="a" class="c form-control input-mini" type="text">
    <span class="input-group-addon"><i class="fa fa-calculator"></i></span>
</div>

I'm launching the calculator as below, and it works fine when an operator (+-*/) is typed. But, I also need the calculator to launch when the input-group-addon is clicked.

$('#a').calculator({showOn:'operator'});

Answer 1

You can show the calculator by yourself when the user clicks on .input-group-addon , like this:

$('.input-group-addon').on('click', function() {
  $('#basicCalculator').calculator('show');
});

http://keith-wood.name/calculatorRef.html#show

 $('#basicCalculator').calculator({ showOn: 'operator', }); $('.input-group-addon').on('click', function() { $('#basicCalculator').calculator('show'); });

 <link href="https://cdn.jsdelivr.net/npm/jquery.calculator@2.0.1/jquery.calculator.css" rel="stylesheet" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/jquery.calculator@2.0.1/jquery.plugin.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/jquery.calculator@2.0.1/jquery.calculator.min.js"></script> <input type="text" id="basicCalculator"> <span class="input-group-addon"><i class="fa fa-calculator"></i></span>

https://jsbin.com/tukuyep/edit?html,js,output