CODEWITHSUNDEEP
javascripthtml
10jo10
10jo10

Reputation: 27

Open new HTML page via javascript and pass parameters

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

Answers (1)

DamiToma
DamiToma

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

Related Questions