Reformatting input-fields

Question

I want to reformat the contents of an HTML form-field when submitting.

For example: The user enters "1.234,56" (which is a valid format for numbers in this locale), but I want to submit the value "1234.56" to the server.

I'd like to hear about other peoples experience with this. How do you do this?

My first thought is an onSubmit-event, which reformats the contents. But does anyone has any experience with an implementation on this?

Or maybe a better idea?

---

Javascript is ALWAYS available. If it's much easier with Dojo, I can use that.

And by the way: It's actually a bit more complex, since I also want to reformat on "blur" too. So the user enters "1234,56" (input format). When focus changes, it should reformat to "1.234,56" (display format). But the actual value sent to the server should be "1234.56" (machine format).
Converting between input format and display format should be easy, but maybe all this can be combined in some clever way.

---

EDIT: This is not for a public website, so opinions about depending on Javascript and similar is not relevant.

Answer 1

Well, one idea that comes to mind may be to use Javascript exclusively, and store the actual entered value into a hidden field. Then trap the onBlur Javascript event of the textbox to call a function that formats values as per your requirement.

Finally, On form submission, access the value present in the hidden field, not the textbox.

Answer 2

The way you asked the question, you basically want to validate on client side, which should be a no-go under any circumstances. Just submit the number and validate it server-side using locale-specific processing. If you want immediate feedback, use AJAX, but do the validation server-side -- you can do your onBlur() with an AJAX request.

Answer 3

Given the information, I would probably do the following:

The blur handler should

1. Get the input
2. Validate the input - is it a number? is it within range? etc.
3. Convert to normalized form for display (1.234,56)
4. Set the value of the form's [input] to the normalized form

The submit handler should

1. Get the input
2. Validate the input - same as above
3. Convert from locale-specific value to the value you want on the server.
4. Set the value of the form's [input] to the converted value.
5. Submit form.

Remember that no matter how much client-side validation you do, you still need to do server-side validation. But I would do as much validation in Javascript as I could stand just because I prefer to let the user know his form values are going to fail without having to so to the server first.

Additionally, I would probably change the server-side action to be able to handle amounts in many locales. That would give me a lot more wiggle room on the submit handler in Javascript.