Add dollar sign ($) before CakePHP input

Question

I'm creating a CakePHP 3.0 form, and I have several input fields (Form->input) where users will enter values of United States Currency. I'd like to add a $ symbol to the left of the input box. From my research, it does not appear that CakePHP's Form supports this on its own, so I believe that a CSS solution would be ideal. The corresponding fields in the database are floats.

I have never worked with cakePHP, but I assume you would use `:before` pseudo element — Jacob G, Jul 27 '15 at 17:44
Thanks for the suggestion! That was one of the things I've already tried, though. I'm not sure why it didn't work (it didn't change appearance at all) so I'm still looking into it. — Jozomby, Jul 27 '15 at 17:46
The problem you are having is that CSS pseudo elements don't work on inputs. — Jacob G, Jul 27 '15 at 17:50

score 0 · Answer 1 · edited May 23 '17 at 12:14

0

:before and :after are applied inside a container, which means you can use it for elements with an end tag.

^Source
Basically, what that means is you cannot use before on inputs, since it would insert the content into the input.
You can do it with CSS's :before pseudo element, but you have to wrap the input in a element, or place an element before it:

.inputcon:before{
    content:'$'
}

Or, you can do it with jQuery:

$("input").wrap("<span class='inputcon'>");

Or with Vanilla JS:

var inputs = document.getElementsByTagName("input");
for(var i =0;i<inputs.length;i++){
    var wrapper = document.createElement("span");
    wrapper.classList.add("inputcon")
    inputs[i].parentNode.insertBefore(wrapper,inputs[i]);
    wrapper.appendChild(inputs[i])
}

edited May 23 '17 at 12:14

Community

1
1

answered Jul 27 '15 at 17:54

Jacob G

13,762
3
47
67

The problem with trying to wrap the input in a div and using :before on that div, or just trying to put the $ symbol before the input, is there is a line break between the dollar sign and the input. – Jozomby Jul 27 '15 at 17:57
You probably want to use JS then, if there is a line break – Jacob G Jul 27 '15 at 18:07
Just to make sure we're on the same page, the problem is that it displays with a line break, whereas I would like the $ symbol to appear immediately before the input, on the same line. – Jozomby Jul 27 '15 at 18:09
@Jozomby yeah, I read your comment wrong at first. Can you use JS? – Jacob G Jul 27 '15 at 18:21
Yes I can. I'm not very experienced with it, though. – Jozomby Jul 27 '15 at 18:24
I'm having a tough time getting that to work. The only time I've ever used javascript with CakePHP before is when defining a javascript function to run on submission of a form. I can't get the script to run on page loading; even when I just put a generic element on the page and copy your javascript over verbatim into – Jozomby Jul 27 '15 at 18:53
couldn't you just use `$this->Html->scriptBlock("var inputs...")`? – Jacob G Jul 27 '15 at 18:55
You'd think that would work, but for some reason it doesn't. I'm starting to think there's something else going on that's causing problems. – Jozomby Jul 27 '15 at 19:03
Since I'm not very familiar with Javascript, is there some way to check? There are no obvious error messages; the page renders just fine, but the script has no effect. – Jozomby Jul 27 '15 at 19:37
1: check the console, and 2: look for the script on the page with the inspector – Jacob G Jul 27 '15 at 19:40

score 0 · Answer 2 · edited Jul 27 '15 at 19:13

It sounds like you want to override the input template to include a $ before the input field. The default input template is <input type="{{type}}" name="{{name}}"{{attrs}}>, so it would change to $ <input type="{{type}}" name="{{name}}"{{attrs}}>.

http://book.cakephp.org/3.0/en/views/helpers/form.html#customizing-the-templates-formhelper-uses

You could override the entire form (probably not what you want), or just that one input. Most of the examples in the book show you how to override for the entire form, but you can override for just that one input field. http://api.cakephp.org/3.0/class-Cake.View.Helper.FormHelper.html#_input

Restricting the field itself to only numbers/symbols that are appropriate for a currency is a javascript/html5 issue, separate from cake. If this is what you want, you should also validate server side with cake.

Additionally, somewhat off topic, currency fields should not be stored as floats in the database. They should be stored as some fixed precision type (such as the decimal type in mysql).

Thanks! This definitely seems to be going the direction I need. One thing I don't understand, though, is how to go about overriding the template for that one input. From the documentation you linked to, it seems that the idea is to use something like 'templates' => 'currency' in the input to tell it to use a different template. That new template should then be located in /config/currency.php. But I'm not certain what exactly to put in that file. — Jozomby, Jul 27 '15 at 18:28

Add dollar sign ($) before CakePHP input

2 Answers2