How to keep the dropdown menu selected value after form is submitted?

Question

I am creating a very simple form with a dropdown menu and a text filed. It shows the errors if the form has empty field during the submission.

I want to show the filled values after the form submission if there is any error. It works on text field as I expected. Ex: If fill the name and submit the form without filling the title dropdown menu, it showing the name I typed on the filed during the the error is appeared.

But how can I do that for dropdown menu also? Ex: If I select the title drop down menu and submit the form without filling name field, it should show the selected title dropdown value during the the error is appeared.

how can I do that? here is my code and it's a wordpress site:

<?PHP
$errors = array();
    if($_POST["submit"]) {
        $name_title = $_POST["name_title"];
        $sender = $_POST["sendername"];

        //Check the name title that it is selected or none.
                if($name_title === none){
                    //if selected is none, add error to $errors array.        
                    $errors['name_title'] = "Please select the title of your name!";
                }

        if(empty($sender)){
            //Blank string, add error to $errors array.        
            $errors['sendername'] = "Please enter your name!";
        }

        // sending form
        if(empty($errors)){
            $mail_sent = wp_mail( $to, $subject, $mailBody, $headers ); 
        }       

    }
    if ($mail_sent) {
?>

<h1 style="color: #007f00;">Request sent.</h1>

<?php 
} else {
?>

<form id="" name="" action="<?php echo get_permalink(); ?>" method="post">
    <div class="label-input-wrapper">
        <div class="form-label">Title</div>
        <div class="form-input">
            <select name="name_title" class="name-title-input">                 
                <option value="none" selected="selected">Select Title</option>
                <option value="Mr">Mr</option>
                <option value="Mrs">Mrs</option>
                <option value="Miss">Miss</option>
                <option value="4">Ms</option>                   
            </select>
            <div class="error-msg">
                <?php if(isset($errors['name_title'])) { echo '<span style="color: red">'.$errors['name_title'].'</span>'; } ?>
            </div>  
        </div>
    </div>  

    <div class="label-input-wrapper">
        <div class="form-label">Name</div>
        <div class="form-input">
            <input type="text" name="sendername" value="<?PHP if(!empty($errors)) { echo $sender;} ?>" />
            <div class="error-msg">
                <?php if(isset($errors['sendername'])) { echo '<span style="color: red">'.$errors['sendername'].'</span>'; } ?>
            </div>
        </div>
    </div>
    <input type="submit" value="Submit" name="submit">
</form>

<?php
}  
?>

Answer 1

Try this.

 <select name="name_title" class="name-title-input">                 
                <option value="none" selected="selected">Select Title</option>
                <option value="Mr" <? if(@$_POST['name_title'] == 'Mr') { echo 'selected = \"selected\"'; } ?>>Mr</option>
                <option value="Mrs" <? if(@$_POST['name_title'] == 'Mrs') { echo 'selected = \"selected\"'; } ?>>Mrs</option>
                <option value="Miss" <? if(@$_POST['name_title'] == 'Miss') { echo 'selected = \"selected\"'; } ?>>Miss</option>
                <option value="4" <? if(@$_POST['name_title'] == 'Ms') { echo 'selected = \"selected\"'; } ?>>Ms</option>                   
            </select>

Answer 2

although the answer by @CKocer can also work but I like to use variables instead and using $_POST in HTML and also more readable

In declare $name_title out side of if($_POST) and can do it like this <?php $name_title = ''; ?> <?php $name_title = ''; ?>

For Drop Down code change like this

 <select name="name_title" class="name-title-input">                 
                <option value="none" selected="selected">Select Title</option>
                <option value="Mr" <?php if($name_title == 'Mr') { ?> selected <?php } ?>>Mr</option>
                <option value="Mrs" <?php if($name_title == 'Mrs') { ?> selected <?php } ?>>Mrs</option>
                <option value="Miss" <?php if($name_title == 'Miss') { ?> selected <?php } 
?>>Miss</option>
              <option value="4" <?php if($name_title == 'Ms') { ?>selected <?php  } ?>>Ms</option>                   
            </select>

Answer 3

I'll borrow @ThinkingWeb's code and tidy it up a bit. One of the great features of HTML tags is that you can line-break them, which makes for much more readable code. Each if statement here gets its own line:

<select name="name_title" class="name-title-input">                 
    <option value="none"
        >Select Title</option>
    <option value="Mr"
        <?php if($name_title == 'Mr'): ?> selected="selected" <?php endif ?>
        >Mr</option>
    <option value="Mrs"
        <?php if($name_title == 'Mrs'): ?> selected="selected" <?php endif ?>
        >Mrs</option>
    <option value="Miss"
        <?php if($name_title == 'Miss'): ?> selected="selected" <?php endif ?>
        >Miss</option>
    <option value="4"
        <?php if($name_title == 'Ms'): ?> selected="selected" <?php endif ?>
        >Ms</option>                   
</select>

I've dropped the selected="selected" in the first option - this will select automatically if there is no explicit selection, and you don't want more than one! I've switched all the selections to use the attribute="value" format, though I don't think it's mandatory for HTML.

I've used the colon form of the if statement too - for HTML I find it preferable to the brace approach.