Show a different value from an input that what will be received as php

Question

I'd like to know if there is a way to show in an input of type text a different value than the one send to PHP.

For example, let say you have :

<input type="text" value="John"> that display John.

Can I change the value to "Doe" for the user but keep it to "John" for php?

Can I achieve this using the difference between $.attr('value') and $.val()?

I ran a couple of tests and it seems that I will have to reverse it directly in my controller. Is there an other solution?

Here is a little jSFiddle to play around.

Answer 1

An odd request to be sure but...

You can't change the field's value and just do a simple form submission. The field will dutifully send whatever is in it. There's a few hackery ways around this tho

Option 1 - Hidden fields

So make a field, disable it, and add a hidden field. Disabled fields are never successful, although the user will be unable to change the field value and many browsers will change the styling of the field automatically

<input type="text" name="name" value="John" disabled>
<input type="hidden" name="name" value="Doe">

Option 2 - Change the value on submit

As you mentioned, you can always change the value when the form is submitted. The below listener will capture the form submitt Using jQuery since you asked it that way

$("form").on( "submit", function( event ) {
  event.preventDefault();
  $('input[name="name"]').val('Doe');
  $("form").submit();
});