通过javascript打开新的HTML页面并传递参数 [英] Open new HTML page via javascript and pass parameters
问题描述
我是javascript和web开发的新手，并且有一个问题。我有两个HTML文件，一个包含搜索字段和一个搜索按钮，另一个应该（稍后）包含搜索结果。如果用户单击搜索按钮，我想打开其他HTML文件并传递搜索词。
I am completely new to javascript and web development and have a question. I have two HTML files, one includes a search field and a search button, the other one should (later) include the search results. If a user clicks the search button, I want to open the other HTML file and pass the search term.
如果我使用当前代码执行此操作，它只传递[object％20HTMLInputElement]而不是搜索词。我现在卡住了几个小时，甚至类似的stackoverflow帖子都无法帮助我。这是我的搜索字段HTML代码：
If I do this with my current code, it just passes [object%20HTMLInputElement] and not the search term. I am now stuck for several hours, even similar stackoverflow posts could not help me. This is my code of the search-field HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Die drei oberen meta tags *müssen* zuerst im Head-Tag angegeben werden; alle anderen Tags können anschließend eingefügt werden -->
<title>Next Event</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<script type="text/javascript" src="http://api.eventful.com/js/api"></script>
<!-- jQuery (notwendig für Bootstraps JavaScript plugins) -->
<script src="js/jquery-3.2.1.min.js"></script>
<!-- Alle kompilierten plugins einbeziehen -->
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
function search() {
var where = document.getElementById("where");
window.location = "SearchResults.html?city=" + where;
}
</script>
<body>
<div class="container-fluid">
<h1>Next Event</h1>
<div class="form-group">
<label for="usr">Ort</label>
<input type="text" class="form-control" id="where" placeholder="Bitte geben Sie eine Stadt ein.">
</div>
<button onclick="search()" type="button" class="btn btn-primary">Search</button> <p><br></p>
<p id="output"/>
<p><br/><br/><br/></p>
<p id="output2"/>
</div>
</body>
</html>
这是搜索结果HTML：
This is the search results HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Die drei oberen meta tags *müssen* zuerst im Head-Tag angegeben werden; alle anderen Tags können anschließend eingefügt werden -->
<title>Next Event</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<script type="text/javascript" src="http://api.eventful.com/js/api"></script>
<!-- jQuery (notwendig für Bootstraps JavaScript plugins) -->
<script src="js/jquery-3.2.1.min.js"></script>
<!-- Alle kompilierten plugins einbeziehen -->
<script src="js/bootstrap.min.js"></script>
<body>
<div class="form-group">
<h1 id="header"></h1>
<script type="text/javascript">
document.getElementById('header').innerHTML = "Events in " + window.location.search;
</script>
</div>
</body>
</html
我会非常感谢任何帮助。
I would be very thankful for any help.
推荐答案
您将整个对象发送到页面，而您应该只发送它的值。
使用此代码获取输入的值：
Your sending the entire object to the page, while you should send just its value.
Use this code to get the value of an input :
var value = document.getElementById("input").value;
然后，通过URL重定向到其他页面发送数据非常简单。您只需要重定向添加如下参数：
Then, it's really simple to redirect to other page sending data via URL. You just need to redirect adding a parameter like this :
window.location.href = "searchresult.html?city="+value;
这篇关于通过javascript打开新的HTML页面并传递参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
