Trying to hide a button element based on a string query in the URL using javascript or JQuery. The URL has a "&" and two "=" to split

Question

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.

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

score 0 · Answer 1 · answered Nov 02 '21 at 17:28

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>

Thank you I appreciate it but doesn't seem to work. Was there something I was supposed to add or change? — JayCee, Nov 02 '21 at 19:30
@JayCee can you share the code you are trying? have you included the jquery script? — NiceToMytyuk, Nov 03 '21 at 07:38

Trying to hide a button element based on a string query in the URL using javascript or JQuery. The URL has a "&" and two "=" to split

1 Answers1