How to pass and get URL parameters in jQuery using php $_GET?

Question

I made a dark mode function that changes the background color and text color of my application. It works well, but the thing is when I go to other pages on value="dark", the value attribute is reset, a new page is in value="light". I have to send a dark mode value to other pages.

I googled my question and found out I can't use $ajax(because url is fixed). I know how to make URL parameter like url/foo?bar=value and $_GET['bar'] equals value, but I have no idea where to put this kind of code.

// This is in the <head> of base.blae.php
    <button id="dm" style="margin: 19px;" class="btn btn-dark" name="mode" value="light" onclick="
        Darkmode(this);
    ">Darkmode</button>

// JS file
function Darkmode(self){ 
    if($('#dm').val() === 'light'){
        Color.backgroundColor('DarkSlateGray');
        Color.textColor('white');
           $('#dm').val('dark');
    } else {
        Color.backgroundColor('white');
        Color.textColor('black');
           $('#dm').val('light');
    }
}

I want to use php URL parameter. For example make url like this http://localhost:8000/events?mode=dark and get the value $_get['mode']. I understand that JS is client-side and PHP is server-side. But I think there's a way to make this work. Could you explain it with code and where should I put it? Thank you, guys!

did you try this https://stackoverflow.com/questions/12456639/how-to-get-data-from-url-with-jquery ? — Liza, Sep 10 '19 at 05:47
Thank you for your kind answer. But the tech stack is fixed. I got to use URL parameters and $_GET sorry.. — Juno J, Sep 10 '19 at 06:23

madalinivascu · Accepted Answer · 2019-09-10T08:42:22.410

1

Use localstorage/sessionstorage to save /retrieve the state

function Darkmode(self){ 
    if($('#dm').val() === 'light') {
        Color.backgroundColor('DarkSlateGray');
        Color.textColor('white');
           $('#dm').val('dark');
           localStorage.setItem('mode', 'dark');//set the state if the user pushes the button
    } else {
        Color.backgroundColor('white');
        Color.textColor('black');
           $('#dm').val('light');
           localStorage.setItem('mode', 'light');
    }
}


var mode = localStorage.getItem('mode');//get the state from storage when you navigate to a new page
if(mode === 'dark')  { // if the mode is black we change the colors, if no state is stored (or is white) we keep it white
           Color.backgroundColor('white');
           Color.textColor('black');
           $('#dm').val('light');
           localStorage.setItem('mode', 'light');

    } else {
           Color.backgroundColor('DarkSlateGray');
           Color.textColor('white');
           $('#dm').val('dark');
           localStorage.setItem('mode', 'dark');
    }

if you want to use the get param then you need to do something like this

 var mode = '<?php echo isset($_GET['mode'])?$_GET['mode']:"light";?>';//create a js variable using php ternary operator
        if(mode === 'light') {
            Color.backgroundColor('DarkSlateGray');
            Color.textColor('white');
               $('#dm').val('dark');

        } else {
            Color.backgroundColor('white');
            Color.textColor('black');
               $('#dm').val('light');

        }

edited Sep 10 '19 at 08:42

answered Sep 10 '19 at 05:53

madalinivascu

32,064
4
39
55

I know how to use localstorage! Thank you for your kind answer though. But the thing is, the tech stack is fixed. I got to use URL parameters and `$_GET` sorry for that ㅠㅅ ㅠ – Juno J Sep 10 '19 at 06:22
what's a **tech stack**?why is it fixed? and how does it interfere with localStorage? – madalinivascu Sep 10 '19 at 06:54
In this case tech stack for me is like, I have to use certain functions or language when writing code.. Cause I'm a student and it's kind a homework.. – Juno J Sep 10 '19 at 06:55
you are using javascript so i gived you a javascript solution, insn't javascript part of your tech stac? – madalinivascu Sep 10 '19 at 08:24
yes it is but I have no choice I have to follow order. bro I know there are lots of way to code, but in the school, if there's 'solve this with A' in the test, and even though I solve it with B perfectly. And ... I will get 0 score. ;( – Juno J Sep 10 '19 at 08:35
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/199269/discussion-between-juno-j-and-madalinivascu). – Juno J Sep 11 '19 at 00:16

How to pass and get URL parameters in jQuery using php $_GET?

1 Answers1