I want to add a $ symbol before a users entry into a text field without actually submitting the $ when the user clicks submit. Additionally, I need to prohibit the user from entering anything but numerical values in to the text input. I know about the JQuery input mask (http://www.conetrees.com/2009/03/blog/jquery-masked-input-plugin-increase-usability-for-masked-format-input-fields) but this plugin requires you to set the exact number of digits/letters that the user is supposed to enter, which is no good for my current project. Can anyone think of a way to accomplish what I have described above?
+1
A:
If the $ will always be there, how about putting it before the text field?
Personally I avoid inserting extraneous things (units, watermarks, whatnot) into the value of a text field like the plague. They always end up getting interpreted as actual content in ways they're not supposed to.
Matti Virkkunen
2010-04-04 12:27:19
One of those 'must have' demands by the client that the $ appear in the field once the user clicks on the text input. I know its totally nuts.
Thomas
2010-04-04 12:28:54
Also there is another part of the form where the client wants to append 'sq.feet' to the end of the user's input.
Thomas
2010-04-04 12:30:45
Slap some sense into your client. Tell him it's the same as having the field labels appear only when they're clicked, which is a nasty variation of Mystery Meat Navigation (http://en.wikipedia.org/wiki/Mystery_meat_navigation)
Matti Virkkunen
2010-04-04 12:34:11
I don't know what to tell you. He's got this retarded cocktail napkin mockup that he wants to adhere to 100% and a 'I could do it if I wanted too' attitudes about web design. You can thank oDesk for this kind of nonsense.
Thomas
2010-04-04 12:45:20
idea: put left-padding on the input and overlay a span with `$` in it on top. Then it looks like it's part of the input, but doesn't take part in editing.
bobince
2010-04-04 12:54:03
I played around with the borders and padding for a long time to see if I could get that kind of solution to work but IE alignment issues made it really messy.
Thomas
2010-04-04 13:01:26
+2
A:
One way would be to grab everything except for the dollar from the input, and store it in a hidden field:
$("form").submit(function() {
var total = $("#total").val();
$("#hidden").val(total.replace("$", ""));
});
Here's a full working solution (bear in mind, it probably needs refinement before it meets the real world):
$("form").submit(function() {
var total = $(".total").val();
$("#hidden").val(total.replace("$", ""));
});
$("#total").keypress(function() {
validateNumeric();
}).keyup(function() {
// if the user has pressed backspace and removed the dollar, put it back
if($(this).val() == null || $(this).val() == "") {
$(this).val("$");
}
});
function validateNumeric(evt) {
var theEvent = evt || window.event;
var key = theEvent.keyCode || theEvent.which;
if(key == 8) {
return true;
}
key = String.fromCharCode( key );
var regex = /[0-9]/;
if( !regex.test(key) ) {
theEvent.returnValue = false;
theEvent.preventDefault();
}
}
Test markup:
<form>
<input type="text" id="total" value="$"/>
<input type="hidden" id="hidden"/>
<input type="submit" value="Submit"/>
</form>
karim79
2010-04-04 12:35:58