CODEWITHSUNDEEP
javascriptphpjqueryhtmlajax
Mps
Mps

Reputation: 131

Remember last selected option from dropdown

I want that our website should remember the last selected option from drop down when he visit again. I'm trying it with jQuery cookies but it's not working.

Here is my select dropdown code

<form action="results.php" method="POST" enctype="multipart/form-data" id="form">
                <input id="search" type="text" name="search" placeholder="Search.." autocomplete="off">
                <select name="city" id="city">
                    <?php 
                        $sql="SELECT * FROM tcity";
                        $connect= mysqli_query($conn, $sql) or die ("Failed To Connect.");
                        while($rows= mysqli_fetch_array($connect, MYSQLI_ASSOC)){ ?>
                            <option value= "<?php echo $rows['c_id']?>" id="optin_val"><?php echo $rows['city_nm'];?></option>
                        <?php }
                    ?>
                </select>
            </form>

Beacuse i'm using it as filter with my search bar i read the value on keyup function my jquery i tried is

$(document).ready(function(){
    $('#search').keyup(function(){
        var value = $(this).val();
        var val = $('#city').val();
        Cookies.set('dropdown',val);
        if ( value != ""){
            $('#my-search').show();
            var dropCookie = Cookies.get('dropdown');
            $.post('functions/search_bar.php', {value: value, val: dropCookie}, function(data){
                $('#my-search').html(data);
            });
        }else{
            $('#my-search').hide();
        }
    });

As you can see I tried to use cookie to remember the selection but its not working as it takes the first option again when the page is refreshed.

Upvotes: 0

Views: 3482

Answers (3)

CUGreen
CUGreen

Reputation: 3184

I assume you are using js-cookie or similar?

This is not tested, but if the cookie is set then you could do the following:

<form action="results.php" method="POST" enctype="multipart/form-data" id="form">
    <input id="search" type="text" name="search" placeholder="Search.." autocomplete="off">
    <select name="city" id="city">
        <?php 
            $sql="SELECT * FROM tcity";
            $connect= mysqli_query($conn, $sql) or die ("Failed To Connect.");
            while($rows= mysqli_fetch_array($connect, MYSQLI_ASSOC)){ ?>
                <option value= "<?php echo $rows['c_id']?>" id="optin_val" <?php echo (!empty($_COOKIE['dropdown']) && $_COOKIE['dropdown'] == $rows['c_id'] ? 'selected' : ''); ?>><?php echo $rows['city_nm'];?></option>
            <?php }
        ?>
    </select>
</form>

Notice where php checks $_COOKIE['dropdown'] and outputs selected if it equals the option value on this line:

<option value= "<?php echo $rows['c_id']?>" id="optin_val" <?php echo (!empty($_COOKIE['dropdown']) && $_COOKIE['dropdown'] == $rows['c_id'] ? 'selected' : ''); ?>><?php echo $rows['city_nm'];?></option>

Upvotes: 0

Ambrish Pathak
Ambrish Pathak

Reputation: 3968

You can use Jquery.Cookie for this case.

https://github.com/carhartl/jquery-cookie

Then save dropdown value in cookie like :

jQuery(document).ready(function(){
  var selectedVal = jQuery.cookie("selected-val");
  if (selectedVal) {
    jQuery("#city").val(selectedVal);
  }
  jQuery("#city").on("change", function(){
    var selection = jQuery(this).val();
    jQuery.cookie("selected-val", selection, {expires: 365, path: '/'})
  });
});

Upvotes: 2

Ashish Patel
Ashish Patel

Reputation: 1041

Please refer this answer you might get some help..

 $(document).ready(function(){
        $('#search').keyup(function(){
            var value = $(this).val();
            var val = $('#city').val();
            var date = new Date();
            date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
            var expires = "; expires=" + date.toGMTString();
            document.cookie = "dropdown=" + val + expires + "; path=/";
         //   Cookies.set('dropdown',val);
            if ( value != ""){
                $('#my-search').show();
                var dropCookie = getCookie("dropdown");
                $.post('functions/search_bar.php', {value: value, val: dropCookie}, function(data){
                    $('#my-search').html(data);
                });
           }else{
               $('#my-search').hide();
           }
  });
function getCookie(cname) {
        var name = cname + "=";
        var ca = document.cookie.split(';');
        for(var i=0; i<ca.length; i++) {
            var c = ca[i];

            if (c.indexOf(name) == 0) {
                return (c.substring(name.length, c.length));
            }
        }
    }

Upvotes: 0

Related Questions