Question

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?

Answer 1

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>