Reputation: 27
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.
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>
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.
Upvotes: 2
Views: 23802
Reputation: 1116
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;
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;
Upvotes: 8