Question posted in
You can find the official documentation here.

remember checkbox and radio button state after page reload – Jquery ajax

I am making a filter with jQuery and Laravel (PHP). It filters the data when I click the checkbox or radio button but, if I click checkbox or radio button and refresh the page the state of checked checkbox or radio button will no longer remain. I want the checked state to remain even after the page reloads.

This is my code.

<div class="search">

    <input type="radio" name="expertise[]" value="backend" />programmer
    <input type="radio" name="expertise[]" value="frontend" />programmer

</div>
<div class="avail">
    <p>
        <input type="checkbox" name="available[]" value="20" />20
    </p>
    <p>
        <input type="checkbox"  name="available[]" value="30" />30
    </p>
</div>

jQuery

<script>
    var expertise = [];
    var  available = [];

    $(document).on('change', 'input[name="expertise[]"], input[name="available[]"]', function(e) {
        e.preventDefault();

        types = []; 
        available = [];
     

        if (document.location.href.indexOf('filter') > -1) {
            var url = '../developers/filter?type=dev';
        } else {
            var url = '/developers/filter?type=dev';
        }

        $('input[name="type[]"]:checked').each(function() {
            expertise.push($(this).val());
            url = url + '&expertise=' + $(this).val();
        });
        $('input[name="available[]"]:checked').each(function() {
            available.push($(this).val());
            url = url + '&available=' + $(this).val();
        });
     

        if (document.location.href.indexOf('filter') > -1) {
            $.get('../developers/filter', {
                type: 'dev',
                expertise: expertise,
                available: available,
               
            }, function(markup) {
                $('.dev-holder').html(markup);
            });
        } else {
            $.get('developers/filter', {
                type: 'dev',
                expertise: expertise,
                available: available,
               
            }, function(markup) {
                $('.dev-holder').html(markup);
            });
        }
        window.history.pushState("", "", url);
    });

</script>

Laravel controller

public function search(Request $request)
{

    $type = $request->get('expertise'); 
    $availability = $request->get('available');
  
  
  $url = 'filter';

    $users = User::where('type','dev')->where('is_approved', '=', 1);
    if (!empty($type)) {
            $users = $users->where('expertise','dev');
    }
        $users->when($availability, function ($query, $availability ) {
            return $query->where(function ($whereQuery) use ($availability ) {
                foreach ($availability as $item) {
                    $whereQuery->orWhere('avaibility', 'LIKE', $item); 
                }
            });
        });
Tags:

3

Answers


  1. 0

    JS/jQuery: Save into localStorage
    PHP/Laravel: Save in session,

    session_start();
if (!isset($_SESSION['vals']) {
    $_SESSION['vals'] = 'default=stuff'
}

$_SESSION['vals'] //access it like this

    and then you can change it when they submit
    ,

    //set
let values = ["yes"]
localStorage.setItem('vals',JSON.stringify(values))

//retrieve
let result = localStorage.getItem('vals')
result = JSON.parse(result)

//use
if (result[0] = "yes") {
    yourradiothing.checked = true
}

    You can also store other things.

    Login or Signup to reply.
  2. 0

    U can use local storage for saving the state. Suppose if check box is clicked then store it in local storage and if page reloads make a function to extract data from the local storage and apply it.

    Login or Signup to reply.
  3. 0

    You are already pushing things to the URL so when you load the page you can check the url query string for what’s set or not.

    $(function () {
    var urlSearchParams = new URLSearchParams(window.location.search); 
    if (urlSearchParams.get('expertise[]')) {
        $('input[name="expertise[]"][value="'+urlSearchParams.get('expertise[]')+'"]').prop('checked', true);
    }
    urlSearchParams.getAll('available[]').forEach(function (val) {
       $('input[name="available[]"][value="'+val+'"]').prop('checked', true);
    });
});

    Note that the URLSearchParams needs to be polyfilled in IE

    This can also be achieved via the HTML and Laravel:

    <div class="expertise">

    <input type="radio" name="expertise[]" id="backend" value="backend" 
{{in_array('backend', request()->input('expertise',[])) ? 'checked' : ''}} />Backend
    <input type="radio" name="expertise[]" id="frontend" value="frontend" 
 {{in_array('frontend', request()->input('expertise',[])) ? 'checked' : ''}}/>Frontend

</div>
<div class="availability">
    <p>
        <input type="checkbox" name="available[]" value="above30"
        {{in_array('above30', request()->input('available',[])) ? 'checked' : ''}}
        />Above 30 hrs/week
    </p>
    <p>
        <input type="checkbox"  name="available[]" value="below30"
        {{in_array('below30', request()->input('available',[])) ? 'checked' : ''}}
        />Below 30 hrs/week
    </p>
</div>

    This is assuming you have this HTML in a .blade.php file

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search