请原谅我,因为我是 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>
您可以尝试类似下面的操作,用户在文本输入外部单击时将重定向。
更好的方法是添加一个 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>