jQuery/js val() overwriting PHPs' $_POST['field']. How to fix?

Question

Hi,

I've got a pretty complicated (for me!) form validation to do. I did all js and now I'm doing php stuff.

The thing is I've put a possibility to copy part of the inputs to other, similar section (recipient -> payer). It's all done by jQuery first copying $("input.payer_sth").val() to $("input.payer_sth"), and then doing it again and again on keyup and blur.

All my inputs are built like that:

<input id="payer_name" name="payer_name" class="foo" type="text" value="<?=$_POST['payer_name']?>"/>

as long as the ones that aren't modified by jQuery work all right on submit and "back", the ones that has modified val() are empty on back.

What's obvious for me is that jQuery is overwriting value="<?=$_POST['field']?>" .

How can this be fixed?

Answer 1

Based on my comments above, you may want to do this on server-side instead of client side.

Example (not the cleanest, but you'll get the point)

<input id="payer_name" name="payer_name" class="foo" type="text" value="<?= (!isset($_POST['player_name'])) ? 'Enter your name' : $_POST['payer_name']?>"/>

So what this will do, is if there is no post set it will output "Enter your name" into the field, if the $_POST is set it will output the value of the post into the field.

The construct is called a ternary operator: http://php.net/manual/en/language.operators.comparison.php

You can clean it up a bit on your side, but this will do the trick and it'll avoid the use of JavaScript for something like this where JS should not be required by the end-user.