Question

Here’s the issue:

I created a drop down menu displaying security questions. One of the options is “Other”. If “Other” is selected, a text box pops up beside the drop down menu prompting the user to input his own security question.

That all works great, but when a user selects “Other” and an error occurs (in another part of the form), the scroll down menu still displays “Other”, but the text box beside it disappears. Is there a way to keep the text box there if $_POST[‘question’] == other?

Here’s an excerpt of my code, I can show more if it would be useful.

   <script type="text/javascript">
        $(function(){
            //initially hide the textbox
            $("#other_question").hide();
            $('#dd_question').change(function() {
              if($(this).find('option:selected').val() == "0"){
                $("#other_question").show();
              }else{
                $("#other_question").hide();
              }
            });
        });
    </script>

Here’s the code for the drop down menu (in php)

$option_list = array(
        "1" => "In what city did your parents meet?",
        "2" => "What is your mother's maiden name?",
        "3" => "What was the name of your first pet?",
        "4" => "What is your oldest sibling's middle name?",
        "0" => "Other",
    );
foreach ($option_list as $option_id => $option) {
        echo "<option value = \"{$option_id}\" ";
        if ($option_id == $_POST['dd_question']) {
            echo " selected=\"selected\"";
        }
    echo ">{$option}</option>";
}

Thanks in advance for all suggestions!

Answer 1

On page load always check for other option
instead of

//initially hide the textbox
            $("#other_question").hide();

do

//initially check the default value in dd_question
if($('#dd_question').find('option:selected').val() == "0"){
                $("#other_question").show();
              }else{
                $("#other_question").hide();
              }