CODEWITHSUNDEEP
javascripthtmlforms
user3232801
user3232801

Reputation: 113

Input Number Type Dollar Sign

I have a form with a line that asks for a dollar amount, however if the user puts a dollar sign in front of the number the form won't let it send because it is set to type="number".

Is there a way to let a user type in a dollar sign ($) in the type="number" and have the form send with no issue?

Code:

<label>Monthly Budget</label>
<input name="budget" type="number" placeholder="$400.00" required data-errormessage-value-missing="Uh oh, somethings wrong!" data-errormessage-type-mismatch="Uh oh, somethings wrong!">

Upvotes: 2

Views: 5209

Answers (2)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201588

The only way to let a user type in a dollar sign in a type="number" field and have the form send with no issue is to intercept (with JavaScript) user input with keyboard event handlers such as onkeyup, remove the dollar sign, and clear the status with setCustomValidity(''). This would require some care, since keyboard event handling (and recognizing which character was entered) varies across browsers. More importantly, it would result in poor usability: the user could type “$42” but would see the “$” vanish, and could get very confused.

Putting the dollar sign in front of the field is one way (not completely reliable) of avoiding the problem of a user-entered dollar sign (rather than solving it). Note that there are other issues with the code, too, such as the use of a specific amount of money as a placeholder (use value if you wish to set an initial value) and not allowing any cents, contrary to what 400.00 suggests. A better idea:

<label for="budget">Monthly Budget</label>
<input id="budget" name="budget" type="number" 
placeholder="xxx.xx" 
required
step="0.01"
title="Amount of money in numbers">

(If you wish to disallow cents, which would be sensible for a budget, omit the step attribute, defaulting it to 1, and omit the placeholder attribute, since there’s probably no suitable value for it.)

Alternatively, use input type="text" and a suitable pattern attribute, e.g.

<input id="budget" name="budget" type="text" 
placeholder="xxx.xx" 
required
title="Amount of money in numbers"
pattern="\$?(\d)+(\.\d\d)?">

(to allow cents but not require them). Note that this would make (on supporting browsers) input like 400.000 or 400.5 invalid, which is probably good. This approach would imply that in form data handling, you would need to deal with an optional leading “$”, which is normally simple of course.

Upvotes: 0

WASasquatch
WASasquatch

Reputation: 1044

Just denote the symbol before the input field so they don't add it again. Currency symbols aren't handled in code, they're added to the viewport for the users display on-the-fly.

<label>Monthly Budget</label>
<span class="input">&#36;<input name="budget" type="number" placeholder="400.00" required data-errormessage-value-missing="Uh oh, somethings wrong!" data-errormessage-type-mismatch="Uh oh, somethings wrong!"></span>

Example

input type=number - Reference

Upvotes: 1

Related Questions