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?

Why don't you do the formatting inside validateForm before sending the request? That way the value in the input won't change and still you are sending formatted data via request — Dhiraj
– Dhiraj, Commented Mar 16, 2015 at 15:38
@epascarello It's a normal field, the user CAN modify it's value and it must be visible, I don't think that's a good option because I'm working with forms with over 30 fields each and I think that duplicating a field (one visible and one hidden) is not a good option. — Paulo Lima
– Paulo Lima, Commented Mar 16, 2015 at 15:44
@DhirajBodicherla That's what i'm trying to do, but how exactly would I change the value of the input and do no change the input value that's displayed to the end-user? — Paulo Lima
– Paulo Lima, Commented Mar 16, 2015 at 15:44
Well if you want the user to have what they want and when the form submits to pass up a different value, than the hidden field is the easiest solution. You can replace the values onsubmit. Or you can just do the conversion on the server which seems the most logical and secure way of doing it. — epascarello
– epascarello, Commented Mar 16, 2015 at 15:49
Changing the class that generates the form is a bit complex, can I keep $_FILE info if I change the form submit to an intermediate validation class and send the file info to crud class? — Paulo Lima
– Paulo Lima, Commented Mar 16, 2015 at 15:54

Community · Accepted Answer · 2017-05-23 12:12:54Z

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#=

edited May 23, 2017 at 12:12

CommunityBot

11 silver badge

answered Mar 17, 2015 at 11:52

Paulo Lima

769 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to change input Value without changing the input content

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related