0

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.

JayCee
  • 11
  • 4
  • 1
    Does this answer your question? [Show/ Hide div based on url](https://stackoverflow.com/questions/32746423/show-hide-div-based-on-url) – Heretic Monkey Nov 02 '21 at 17:24
  • The extra step of having two equals signs is a matter of simply applying the answers to [How do I split a string, breaking at a particular character?](https://stackoverflow.com/q/96428/215552) – Heretic Monkey Nov 02 '21 at 20:28
  • Does this answer your question? [How to hide an element if the page contains a specific url / word?](https://stackoverflow.com/questions/73308042/how-to-hide-an-element-if-the-page-contains-a-specific-url-word) – Joseph Aug 12 '22 at 02:23

1 Answers1

0

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>
NiceToMytyuk
  • 3,644
  • 3
  • 39
  • 100