Add a pretty $ to currency form fields

API & Custom Code Show & Tell
1

I had always admired the option in the Bootstrap framework to prepend currency based form fields with the dollar sign. Knack does a good job of formatting it when you are displaying the value, but it's not included in the form input version.

This is the output goal:

Here is how to do it:


First the javascript:

$('.kn-input-currency .input').each(function() {
    $(this).prepend('<span class="currency">$</span>');
});

Because knack wraps currency fields nicely, we can apply this across the board.

And here is the CSS I used to make it pretty:

/* remove the border radius on the left side of currency fields */
.kn-input-currency input[type=text] {
 	  border-radius: 0 3px 3px 0 !important;
  	  -webkit-border-radius: 0 3px 3px 0 !important;
}

/* format the dollar sign prepend */

.kn-input-currency span.currency {

display: inline-block;

border: 1px solid #bbb;

padding: 3px 8px;

line-height: 20px;

margin-right: -5px;

border-radius: 3px 0 0 3px !important;

-webkit-border-radius: 3px 0 0 3px !important;

}


/* I added this for general feng shui because the form value is close to the edge and sticks out especially when the dollar sign is there */

.kn-input input[type=text] {

padding-left: 6px; !important;

}

Pretty simple, but creates a nice effect and reminds users that they are entering currency and not a normal number value and prevents them from trying to include the $ in the actual value.

2

Great to hear it, Michael. I think it would be a great idea to have them add a class to the div.input that says what type of currency it is then it would be super easy.

3

Works beautifully, thanks!

I've now got to work out how to change the symbol based on a 'currency' field: USD, EUR, GBP, etc. I might mine Nic's Git repository for inspiration :-)

4

Michael, after refreshing a couple times I was able to replicate your problem. I believe this version fixes it because it will only add it if it's not already there:

// Add dolar signs to currency fields
  $('.kn-input-currency .input').each(function() {
    if ($(this).find('span.currency').length < 1) {
    	$(this).prepend('<span class="currency">$</span>');
    }
  });

Let me know if that fixes your issue - thanks!

5

When I use the .any version, I get a duplicate symbol "$$". I assume that's because it's being called twice (perhaps once for the view and once for the field)? Do you know of a way round the duplication which can still work for the whole app? I'd rather not specify the views individually.

6

Thanks Benjamin.

7

Michael, thank you. I should have mentioned this and will adjust the original post if I am allowed. But for this to work, it needs to use one of the Knack javascript event calls. If you want it to work everywhere, simply wrap the javascript above in this:

$(document).on('knack-view-render.any', function(event, view, data) {
...
});

If you want it to only render on a specific view, you can change "any" to "view_#" where # is the number of the view. You can find this in the source or easily by looking at the URL in the backend builder. Let me know if this answers your question!

8

Looks great in your example. I can't get it to work: do I need to top and tail the javascript (and/or css) to make it work across the site?

9

A small addendum - in order to get this to display nicely on mobile device-sized screens, add this to the CSS:

/* for the mobile size mods */
@media screen and (max-width: 500px) {
     .kn-input-currency span.currency {
          float: left;
          margin-right: -1px;
          line-height: 24px;
     }
     .kn-view form .kn-input-currency input[type=text] {
          width: 90% !important;
     }
}

10

Benjamin, thank you SO much for this post. For some reason it’s not working for me. Below is the EXACT (copied and pasted) code I have in my app. Any way you can let me know what I’m doing wrong?

JS:
// Currency formatting
$(‘.kn-input-currency .input’).each(function() {
$(this).prepend(‘$’);
});

CSS:
/* Currency Formatting remove the border radius on the left side of currency fields /
.kn-input-currency input[type=text] {
border-radius: 0 3px 3px 0 !important;
-webkit-border-radius: 0 3px 3px 0 !important;
}
/ format the dollar sign prepend */

.kn-input-currency span.currency {

display: inline-block;

border: 1px solid #bbb;

padding: 3px 8px;

line-height: 20px;

margin-right: -5px;

border-radius: 3px 0 0 3px !important;

-webkit-border-radius: 3px 0 0 3px !important;

}