Trying to hide a button element based on a string query in the URL using javascript or JQuery
If I have a URL... for ex:
https://xxxxxx.com/xxxxxx.aspx?UserID=12345&type=ABCDE=true
The button:
<button class="smallButton"> </button>
How do I hide the button if ABCDE= true and show if it's not? I read other posts but they didn't seem to work. Because of the "&" and the two "=" in the string, it's a little different than the example's I've seen. Any help is appreciated. Thank you.
You can get the query string params by using URLSearchParams with .get
Then to get only it's value trim the string before the = and just show or hide the button based on the condition.
You can do it like this:
let searchParams = new URLSearchParams("https://xxxxxx.com/xxxxxx.aspx?UserID=12345&type=ABCDE=true")
// let searchParams = new URLSearchParams(window.location.search) uncomment if you want to use your current window location URL.
if (searchParams.has('type')) { // check if the type exist in query string
let param = searchParams.get('type') // get the param
param = param.substr(param.indexOf('=') + 1, param.length) // trim the value to get true from "ABCDE=true" so in substr you're going to get the string from the char = position + 1 to the end of the string.
if (param == 'true') { // check if the param is true
$('.smallButton').show(); // show the button
} else {
$('.smallButton').hide(); // hide it
}
}.smallButton {
display: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="smallButton">
SMALL BUTTON
</button>