How to change input Value without changing the input content

Question

I'm updating the validation proccess of a custom form class that we created to become for user friendly by using masks on my form inputs.

We MUST save the form via HTTP request because of the file upload.

There are situations that we can use AJAX to save a FORM, and on those situations I've created a method that modifies the content based on it's validation type, like:

01/02/1234 is changed to 1234-02-01 123.456,78 is changed to 123456.78

The problem is when i've to send it by HTTP request.

Example form:

<form id="formID" action="UrlToCRUDClass" onsubmit="return validateForm(this);">
    <input id="datefield" type="text" value="" data-valid="DATE">
</form>

I want to know how do I change the value that's sent via POST without changing the value of the input that's visible to the end-user.

| 08/04/1992 | <= User input value (visible inside the Input container) | 1992-04-08 | <= Post value (Invisible to user input)

I've tried changing with no success:

$('#datefield').attr('value','unmaskedvalue'); //-- Post Value is 08/04/1992
$('#datefield').val('unmaskedvalue'); //-- Changes the visible content for the end-user
$('#datefield').prop('value','unmaskedvalue').attr('value','maskedvalue'); //-- Changes the visible content for the end-user

Is there any other way WITHOUT REDIRECTING, to format the input before it's sent and without changing the value inside the input container?

Answer 1

It seems that I was looking to the wrong problem, (we already have a PHP side Validation) my only problem with sending an Ajax form, was input type=file, searching around this problem was solved by sending files by Ajax also.

I was able to complete my Ajax Upload thanks to: https://stackoverflow.com/questions/2320069/jquery-ajax-file-upload# =