Modifying HTML to pass Text Input as URL Parameter

February 22, 2023

Forgive me as I am brand new to HTML and Javascript. Below is my code that I am trying to use to dynamically pass a parameter into the URL of my PowerBI Report from a text box input the user will enter. Can someone give me advice on how to modify this so that the input in the textbox will be passed to the URL when the link is clicked? It is a requirement that I not use code behind. I am sure this is not advised but it is out of my control due to business rules. Below you can see that I tried to get the value of the textbox and then pass that as X to my URL string. When I test it, nothing happens and therefore my redirect URL is invalid.

Here is what I tried:

<html>
    <body>
<div class="pageContent">
        <div class="form-group has-feedback">
            <label class="control-label" for="inputSuccess2">Project Number:</label>
            <input type="text" class="form-control" id="inputSuccess2" />
            <span class="glyphicon glyphicon-search form-control-feedback"></span>
        </div>
        var x = document.getElementById("inputSuccess2").value
        <script type="text/javascript">
            function searchURL(){
            window.location = "http://www.myurl.com/search/" + (x);
                }</script>
    <div class="jrow">
        <div class="card-container">
            <div class="card card-block">
                <img src="/Images/PowerBI_65x50_rounded.png">
                <div class="card-title-container">
                        <h4 class="card-title" style="padding-left: 5px; display: inline-block;"><a href="https://app.powerbi.com/report?filter=Dashboard/Project eq 'x'" target="_blank">Reporting Tool</a></h4>
                </div>
                <p class="card-text">Track Forecast, Baseline, Earned and Actual Hours</p>
            </div>
        </div>
</div>
</body>
</html>

>Solution :

You can try something like the one below, where the user will redirect when it clicks outside the text input.

A better approach to this will be adding a HTML button and calling the function when clicked.

Ref: https://www.w3schools.com/jsref/event_onclick.asp

function searchURL() {
  var x = document.getElementById("inputSuccess2").value
  window.location = `https://app.powerbi.com/groups/me/reports/ReportSection?filter=Dashboard/Projecteq'${x}'`;
}

<div class="pageContent">
  <div class="form-group has-feedback">
    <label class="control-label" for="inputSuccess2"> Project Number: </label>
    <input type="text" class="form-control" id="inputSuccess2" onfocusout="searchURL()" />
  </div>

  <div class="jrow">
    <div class="card-container">
      <div class="card card-block">
        <img src="/Images/PowerBI_65x50_rounded.png" />
        <div class="card-title-container">
          <h4 class="card-title" style="padding-left: 5px; display: inline-block;"> <a href="https://app.powerbi.com/report?filter=Dashboard/Project eq 'x'" target="_blank">Reporting Tool</a>
          </h4>
          <p class="card-text">Track Forecast, Baseline, Earned and Actual Hours
          </p>
        </div>
      </div>
    </div>
  </div>