jQuery UI chained select-menu. Form resets when button is clicked

Question

I am using a chained select-menu to guide the visitor trough some questions. This works like a charm, however, in the end the user has to click a button to send all values to a PHP-script. This also works without a problem, however, when the page reloads (because the button sends the form to the same page), all fields are hidden again and this is not what i want.

I would like the chained selection menu's to be shown when items in them are "selected" when the page reloads. Using PHP i simply test if a field was selected and add that status to the select-menu. But they remain hidden until you manually select everything again.

I think it's just a minor adjustment in the JS-part. But my limited knowledge of JS leaves me without a solution.

Sources

• jsFiddle
• Chainedselection script
• jQuery UI and selectmenu

Answer 1

Since the form submits to itself the values the user chose will be available in either $_GET or $_POST (depending on whether the action of your form is get or post).

The best approach would then be to use those values to set the selected attribute on the appropriate <option> node using something like this.

$selectedC1Value = '';
<? if isset($_POST['c1']) { ?>
    $selectedC1Value = $_POST['c1'];
<? } ?>

<select name="c1" id="c1" >
    <option value="" <? if ($selectedC1Value == '') { echo 'selected'; } ?>>
        --
    </option>
    <option value="age" <? if ($selectedC1Value == '') { echo 'selected'; } ?>>
        Age
    </option>
    <option value="education" <? if ($selectedC1Value == '') { echo 'selected'; } ?>>
        Education
    </option>
    <!-- etc -->
</select>

This would have to be repeated for each <select> in your <form>.