Keep values selected after form submission

Question

Consider:

<form method="get" action="">
   <select name="name">
      <option value="a">a</option>
      <option value="b">b</option>
   </select>
   <select name="location">
      <option value="x">x</option>
      <option value="y">y</option>
   </select>
   <input type="submit" value="Submit" class="submit" />
</form>

On submitting the form, how do I make sure that the selected values remain selected in the dropdowns? This form is inside WordPress (PHP).

There is not benefit in repeating the option's text as its `value`. You can safely remove those redundant declarations and all form submission process and clientside operations will still work flawlessly. — mickmackusa, Oct 29 '22 at 10:37

score 52 · Accepted Answer · edited Jul 08 '19 at 01:14

52

To avoid many if-else structures, let JavaScript do the trick automatically:

<select name="name" id="name">
   <option value="a">a</option>
   <option value="b">b</option>
</select>

<script type="text/javascript">
  document.getElementById('name').value = "<?php echo $_GET['name'];?>";
</script>

<select name="location" id="location">
  <option value="x">x</option>
  <option value="y">y</option>
</select>

<script type="text/javascript">
  document.getElementById('location').value = "<?php echo $_GET['location'];?>";
</script>

edited Jul 08 '19 at 01:14

Peter Mortensen

30,738
21
105
131

answered Feb 11 '10 at 17:27

Sarfraz

377,238
77
533
578

13

Strange solution IMO- Introducing javascript to save a couple lines of PHP makes no sense. – Yarin Jun 14 '12 at 17:24
@Yarin: Agreed, a quick solution, in office by that time, no much time :( – Sarfraz Jun 14 '12 at 17:27
great solution but kind of sketchy. used on LEMP stack and i was unable to reload nginx. after debugging with sudo tail /var/log/nginx/error.log the errors were directly at these lines and after removing code i was able to reload just fine – sqrepants Apr 12 '16 at 12:44
value is correct but i get "Uncaught TypeError: Cannot set property 'value' of null" Select name matches...idk – Michael Rogers Mar 09 '19 at 16:28

score 31 · Answer 2 · answered Feb 11 '10 at 17:23

31

<select name="name">
   <option <?php if ($_GET['name'] == 'a') { ?>selected="true" <?php }; ?>value="a">a</option>
   <option <?php if ($_GET['name'] == 'b') { ?>selected="true" <?php }; ?>value="b">b</option>
</select>

answered Feb 11 '10 at 17:23

Ignacio Vazquez-Abrams

776,304
153
1,341
1,358

4

If the `option` tags are being generated in code (and if they aren't, then why not?) you can just put the check within the loop. – Ignacio Vazquez-Abrams Feb 11 '10 at 17:39

score 9 · Answer 3 · edited Jul 08 '19 at 01:17

After trying all these "solutions", nothing work. I did some research on W3Schools before and remember there was explanation of keeping values about radio.

But it also works for the Select option. See below for an example. Just try it out and play with it.

<?php
    $example = $_POST["example"];
?>
<form method="post">
    <select name="example">
        <option <?php if (isset($example) && $example=="a") echo "selected";?>>a</option>
        <option <?php if (isset($example) && $example=="b") echo "selected";?>>b</option>
        <option <?php if (isset($example) && $example=="c") echo "selected";?>>c</option>
    </select>
    <input type="submit" name="submit" value="submit" />
</form>

score 4 · Answer 4 · edited Jul 08 '19 at 01:18

4

Since WordPress already uses jQuery you can try something like this:

var POST=<?php echo json_encode($_POST); ?>;
for(k in POST){
  $("#"+k).val(POST[k]);
}

edited Jul 08 '19 at 01:18

Peter Mortensen

30,738
21
105
131

answered Jul 23 '13 at 02:07

oda

41
2

Are there any security concerns with using this type of method? – rnevius Sep 17 '14 at 14:20

score 4 · Answer 5 · edited Jul 08 '19 at 01:19

If you are using WordPress (as is the case with the OP), you can use the selected function.

<form method="get" action="">
  <select name="name">
    <option value="a" <?php selected( isset($_POST['name']) ? $_POST['name'] : '', 'a' ); ?>>a</option>
    <option value="b" <?php selected( isset($_POST['name']) ? $_POST['name'] : '', 'b' ); ?>>b</option>
  </select>
  <select name="location">
    <option value="x" <?php selected( isset($_POST['location']) ? $_POST['location'] : '', 'x' ); ?>>x</option>
    <option value="y" <?php selected( isset($_POST['location']) ? $_POST['location'] : '', 'y' ); ?>>y</option>
  </select>
  <input type="submit" value="Submit" class="submit" />
</form>

I think it is the best solution for WordPress. It works for me. Thank you. — zahra_oveyedzade, Sep 07 '20 at 14:04

score 3 · Answer 6 · edited Jul 08 '19 at 01:20

JavaScript only solution:

var tmpParams = decodeURIComponent(window.location.search.substr(1)).split("&");
for (var i = 0; i < tmpParams.length; i++) {
    var tmparr = tmpParams[i].split("=");
    var tmp = document.getElementsByName(tmparr[0])[0];
    if (!!tmp){
        document.getElementsByName(tmparr[0])[0].value = tmparr[1];
    }
}

Or if you are using jQuery you can replace

 var tmp = document.getElementsByName(tmparr[0])[0];
 if (!!tmp){
     document.getElementsByName(tmparr[0])[0].value = tmparr[1];
 }

with:

 $('*[name="'+tmparr[0]+'"]').val(tmparr[1]);

score 1 · Answer 7 · answered Jul 07 '17 at 05:16

Try this solution for keep selected value in dropdown:

<form action="<?php echo get_page_link(); ?>" method="post">
    <select name="<?php echo $field_key['key']; ?>" onchange="javascript: 
       submit()">
    <option value="">All Category</option>
    <?php 
    foreach( $field['choices'] as $key => $value ){ 
       if($post_key==$key){ ?>
          <option value="<?php echo $key; ?>" selected><?php echo $value; ?></option>
<?php
   }else{?>
  <option value="<?php echo $key; ?>"><?php echo $value; ?></option>
 <?php }
  }?>
 </select>
</form>

score 0 · Answer 8 · edited Aug 26 '15 at 01:32

This works for me!

<label for="reason">Reason:</label>
<select name="reason" size="1" id="name" >
    <option value="NG" selected="SELECTED"><?php if (!(strcmp("NG", $_POST["reason"]))) {echo "selected=\"selected\"";} ?>Selection a reason below</option>
    <option value="General"<?php if (!(strcmp("General", $_POST["reason"]))) {echo "selected=\"selected\"";} ?>>General Question</option>
    <option value="Account"<?php if (!(strcmp("Account", $_POST["reason"]))) {echo "selected=\"selected\"";} ?>>Account Question</option>
    <option value="Other"<?php if (!(strcmp("Other", $_POST["reason"]))) {echo "selected=\"selected\"";} ?>>Other</option>

</select>

score 0 · Answer 9 · edited Jul 08 '19 at 01:21

I don't work in WordPress much, but for forms outside of WordPress, this works well.

PHP

location = "";  // Declare variable

if($_POST) {
    if(!$_POST["location"]) {
        $error .= "Location is required.<br />"; // If not selected, add string to error message
     }else{
        $location = $_POST["location"];          // If selected, assign to variable
     }

HTML

<select name="location">
    <option value="0">Choose...</option>
    <option value="1" <?php if (isset($location) && $location == "1") echo "selected" ?>>location 1</option>
    <option value="2" <?php if (isset($location) && $location == "2") echo "selected" ?>>location 2</option>
</select>

score 0 · Answer 10 · answered Apr 16 '19 at 20:35

0

Just change this line:

 <input type="submit" value="Submit" class="submit" />

with this line:

 <input type="submit" value="Submit/Reload" class="submit" onclick="history.go(-1);">

answered Apr 16 '19 at 20:35

lawrghita

29
6

GanatraJay · Answer 11 · 2021-11-28T18:33:49.143

<select name="name">
    <?php $options = ["a", "b", "c", "d", "e"];
        foreach($options as $o){                            
            if($o == $_GET['name']) $attr="selected='true'";
            else $attr = "";
            echo "<option value='{$o}' {$attr}>{$o}</option>";
        } 
    ?>
</select>

We can create an array of option before hand and only use simple if/else to check if selected or not. If you want different values for data and different value for displaying option you can use associative arrays too.

<select name="name">
    <?php $options = ["a"=>"Option A", "b"=>"Option B", "c"=>"Option C", "d"=>"Option D", "e"=>"Option E"];
        foreach($options as $index=>$o){                            
            if($index == $_GET['name']) $attr="selected='true'";
            else $attr = "";
            echo "<option value='{$index}' {$attr}>{$o}</option>";
        } 
    ?>
</select>

score -1 · Answer 12 · answered Jan 21 '15 at 09:33

-1

<form method="get" action="">
 <select name="name" value="<?php echo $_GET['name'];?>">
   <option value="a">a</option>
   <option value="b">b</option>
 </select>
 <select name="location" value="<?php echo $_GET['location'];?>">
   <option value="x">x</option>
   <option value="y">y</option>
 </select>
   <input type="submit" value="Submit" class="submit" />
</form>

answered Jan 21 '15 at 09:33

Adrian Preda

9
1

This doesn't work. You need to set the `selected` attribute on the option you want selected. – Cave Johnson May 06 '17 at 17:55

Keep values selected after form submission

12 Answers12

PHP

HTML

Linked

Related