How do I make a search box link to a site on my page?

Question

I am looking to make a simple search box that would link to a specific destination on my website, as well as adding "?id=..." where ... would be whatever they enter into the search box. For example, if they were to type 7654143 into the search box it would link them to .../player?id=7654143

I believe I know how to do the html part of it but I am lost when it comes to javascript which is what I assume I need for this to work...

In addition to that, if they enter something which does not fit the guidelines required (number has to start with 7654 and has to be 15 characters long exactly) the background color of the search box will flash red for 1 second with a transition

<!DOCTYPE html>
<html>
    <head>
        <title>Stats page</title>
        <link href="css/style.css" type="text/css" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Ubuntu:400,500" rel="stylesheet">
    </head>
    <body class=body>
        <div class="header">
            <a href=#>Leaderboards</a>
            <a href=#>Server stats</a>
            <a href=# class=active>Search</a>
        </div>
        <h1 class=title>Roleplay<span>Stats</span></h1>
        <div class=search>
            <input type="text" placeholder="Who are you looking for?">
        </div>
    </body>
</html>


Show source
| javascript   | html   | css   | search   2017-11-29 22:11 1 Answers

Answers to How do I make a search box link to a site on my page? ( 1 )

  1. 2017-11-29 23:11

    I will focus on the backend part of this question, someone else may pitch in for the validation process. For the "id=" part in the form, I would personally use PHP. Make sure your input is in a form and use the method GET to make sure the value goes in the URL. (Let's assume your target page is player.php, which needs to be .php if you go this route)

    On the form page (the name in the input is what will be put in the url : player.php?name-of-input=...) :

    <form method="get" action="player.php">
        <input type="text" name="id" placeholder="Who are you looking for?">
    </form>
    

    On the "player" page, you would have to isolate the value in the url and then fetch the appropriate player corresponding to this value, which is where PHP comes in handy.

    On the player page, the php section that should be put at the top in the code :

    <?php 
       $player = $_GET['id'];
       //The "id" inside the brackets is actually the name of the input in your form
    ?>
    

    With this code, the user will input the id, which will go to the url. Then, the player page, let's assume it is player.php, will have a url that looks like player.php?id=7654... The php code will fetch the id and then you can do the code that will output the appropriate player.

Leave a reply to - How do I make a search box link to a site on my page?

◀ Go back