修改 HTML 以将文本输入作为 URL 参数传递

问题描述 投票:0回答:1

请原谅我,因为我是 HTML 和 Javascript 的新手。下面是我的代码,我试图使用它从用户将输入的文本框输入动态地将参数传递到我的 PowerBI 报告的 URL。有人可以给我建议如何修改它,以便在单击链接时将文本框中的输入传递到 URL 吗?要求我不使用代码隐藏。我确信不建议这样做,但由于业务规则,这是我无法控制的。您可以在下面看到我尝试获取文本框的值,然后将其作为 X 传递到我的 URL 字符串。当我测试它时,没有任何反应,因此我的重定向 URL 无效。

这是我尝试过的:

<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>
javascript html asp.net parameter-passing
1个回答
0
投票

您可以尝试类似下面的操作,用户在文本输入外部单击时将重定向。

更好的方法是添加一个 HTML 按钮并在单击时调用该函数。

参考:https://www.w3schools.com/jsref/event_onclick.asp

function searchURL() {
  var x = document.getElementById("inputSuccess2").value
  window.location = "http://www.myurl.com/search/" + 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>

© www.soinside.com 2019 - 2024. All rights reserved.