Question

I have a form that submits to a third-party service that runs some validation. On error, it redirects to the same page as the form but appends a query string containing the original form values along with an error message.

Because of this query string, the browser sees it as a “new page” and the form is blank.

I’ve tried one method using PHP (see Code Review question) that boils down to: “grab the GET value for each field, on an individual basis, and then set these as the value on the form.” It sort of works, but:

• the radio buttons are tricky to deal with
• I don’t have full PHP functionality. I’m in WordPress with a PHP-in-pages plugin that can run certain PHP but is choking on defining a function and then re-using it

What is the recommended method (PHP or JavaScript… and I do have jQuery on the site also) for re-populating this form?

Answer 1

Unless you are dynamically assembling your fields, it won’t be easy to dynamically repopulate them using PHP. If you are, you can do something like this:

PHP

$fields = [
    'username' => ['type' => 'text', 'value' => $_GET['username']],
    'setting1' => ['type' => 'radio', 'value' => $_GET['radio']]
];
foreach( $fields as $name => $input ) {
    echo "<input type='{$input['type']}' name='{$name}' value='{$input['value']}'>";
}

If not, you can use a combination of PHP and JavaScript like this. I’m using jQuery to simplify things.

PHP and JavaScript

$fields = $_GET;
echo '<script type="text/javascript">
var errors = { ';
foreach( $fields as $name => $value ) {
    echo $name . " : '{$value}',\n";
}
echo '};

$.each(errors, function(name, value) {
    $("input[name="+name+"]").val(value);
});
</script>';

This is untested and I know there is at least one bug (extra comma in the errors array) but should be a good starting point. The goal of the second method is to assemble an array using PHP which the JavaScript can then use and execute a loop to assign those values to each input field. But again – the logic for select boxes and radio buttons and so on will be complex. Instead of just assigning val you would have to set checked properties, etc.

Unfortunately I don’t know if there are any libraries or jQuery plugins which already do this.