How to use JScript to make a search bar?

user_14662676 0
Viewed 74

I have a domain name with a CPanel. I was trying to make a search feature where a javascript string will join with an input HTML tag which is stored in a variable using document.getElementById(). There is also a button with onlick event <button id="btn-js" onclick="location.href=text_2">Search</button> where text_2 is the combination of the website URL string and the input id. But when I run it, it goes to my website URL but on an error page. I have tried to add it after the onclick event but It doesn't work.

Full Code:

<!DOCTYPE html>
<html lang="en-US">
    <head>
        <meta name="author" content="PoopyPooper">
        <link rel="stylesheet" href="index.css">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
        <link rel="icon" href="http://img.asdfghjklzxcvbnm.ml/icons/mainIcon.png">
        <meta charset="utf-8">
        <meta name="description" content="The place where we store images, icons and many more media for easy use.">
        <title>The place where we add media!!</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script>
        var search_feature_text1 = 'http://media.asdfghjklzxcvbnm.ml/';
            var lol = document.getElementById("id") //LOL
            var text_2 = search_feature_text1+lol;
        </script>
    </head>
    <body>
        <p class="head">MEDIA!!</p><br><br><br>
        <p class="body-1">Type the url on your web or just type in the image directory(All the text with slashes (if there 
        are) After media.asdfghjklzxcvbnm.ml/)
            here: <br></p>
        <p class="content-change">http://media.asddfghjklzxcvbnm.ml/<input type="text" id="id" placeholder="Your directory here">
        <button id="btn-js" onclick="location.href=text_2">Search</button></p>
    </body>
</html>
search html javascript
1 Answers

I am not sure about the URL you are using in your code "http://media.asddfghjklzxcvbnm.ml/"

I tried to directly navigate to "http://media.asddfghjklzxcvbnm.ml/" but I received "This site can’t be reached"

Also you are not accessing the value of the text box when you use:

 var lol = document.getElementById("id");

You should do:

 var lol = document.getElementById("id").value;

If the user did not enter anything in the text box, corresponding value will be null

I updated your code just as a demonstration for invoking event listener of the click of the search button

  <button id="btn-js" onclick="navigate()">Search</button></p>

So on button click, the navigate function will be invoked (it is the button click eventListener)

The navigate function is declared within the script tag and it will capture the user input and concatenate it to your the hard coded string variable in your case "http://media.asddfghjklzxcvbnm.ml/", but for the purpose of demonstration I replaced it with "http://www.google" for the user to forecefuly type ".com" literaly in the text box to display google page

TODO: Check you domain and replace the hardcoded one in the code also at least make sure that the user input is not null or empty with alert after capturing the value and before navigating to the target url (use if statement).

Checkout this code:

 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta name="author" content="PoopyPooper">
    <link rel="stylesheet" href="index.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <!-- <link rel="icon" href="http://img.asdfghjklzxcvbnm.ml/icons/mainIcon.png"> -->
    <meta charset="utf-8">
    <meta name="description" content="The place where we store images, icons and many more media for easy use.">
    <title>The place where we add media!!</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script>
    

    function navigate(){
        var search_feature_text1 = 'http://www.google';
        var textVar = document.getElementById("textVarId").value; //LOL
        var text_2 = search_feature_text1+textVar;
        location.href=text_2
    }
        
    </script>
</head>
<body>
    <p class="head">MEDIA!!</p><br><br><br>
    <p class="body-1">This is a demo!! Just type the '.com' in the text box and search to navigate to 'http://www.google.com': <br></p>
    <p class="content-change">http://www.google<input type="text" id="textVarId" placeholder="Your directory here">
    <button id="btn-js" onclick="navigate()">Search</button></p>
</body>
</html>
user_85367210
Related