Submit unmasked form value with jQuery/meioMask

Question

I mask the input of fields like SSN to contain dashes when they are displayed but would like the value that is submitted to be only the numbers.

For example, my SSN is formated as:

<input type="text" name="ssn" alt="999-999-9999"/>

And upon entering "1234567890" I get the nice formatted output.

123-456-7890

Now I would like only the numbers to be submitted as "1234567890". Is this easily possible?

For reference: http://www.meiocodigo.com/projects/meiomask/

Answer 1

I'm not sure on the etiquette on answering my own question but I actually used a fairly simple solution derived from both of your answers.

Problems arose from using hidden fields based on the site using the Struts framework and it's automatic form processing and special JSP form tags. I would change the backend to do all the processing there but as it's the middle of the day I can't restart the Tomcat server to load in the changes without crippling operations for a short time.

On submit I call a function UnmaskMaskedValue() which explicitly sets all the masked values to have a mask not containing the invalid characters.

function UnmaskMaskedValue() {
  $('#ssn').setMask('9999999999');
}

This changes the value before any data is submitted to be valid on the backend.

I appreciate both of your suggestions and would rate you up if only I was able to.

Answer 2

This would probably solve your problem. It's quick-n-dirty though. It just removes the '-' signs with a regex and spits it out into a hidden field which will then be submitted.

<input type="text" id="ssnMasked" />
<input type="hidden" id="ssn" name="ssn" />
<input type="button" value="Submit" onclick="RemoveMaskAndSubmit()"/>

<script type="text/javascript">
    function RemoveMaskAndSubmit() {
        $('#ssn').val($('#ssnMasked').val().replace(/\-/g,''));
        $('#formId').submit();
    }
</script>

Answer 3

Looks like this option is deprecated.

<a onclick="jQuery('#unmasked_string').html( jQuery('#unmasked_input').unmaskedVal() );return false;" href="#">Get the unmasked value from the input</a>