Open new HTML page via javascript and pass parameters

Question

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.

var where=document.getElementById("where").value or var where=$("#where").val();// jquery way — Madhawa Priyashantha
– Madhawa Priyashantha, Commented Apr 29, 2017 at 11:23
Thank you, this solved the problem! Is my approach considered bad style? I read a lot about get and post methods - would these methods be better? — 10jo10
– 10jo10, Commented Apr 29, 2017 at 11:26
@10jo10 You need to be aware of Cross Side Scripting. With this schema it isn't hard to send you a malicious script. — DamiToma
– DamiToma, Commented Apr 29, 2017 at 11:29

DamiToma · Accepted Answer · 2017-04-29 11:25:29Z

8

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;

answered Apr 29, 2017 at 11:25

DamiToma

1,1273 gold badges11 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

10jo10 Over a year ago

Thank you, too. This solved the problem. Would you consider this approach bad style? I read a lot about get and post methods - would this be the better approach?

DamiToma Over a year ago

@10jo10 Check this page : owasp.org/index.php/…. XSS attacks can be devastating.

Collectives™ on Stack Overflow

Open new HTML page via javascript and pass parameters

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related