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!
1 answers
solution1
1 ACCPTED 2019-09-10 05:53:28
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');
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.