CODEWITHSUNDEEP
html
chivata
chivata

Reputation: 23

input search and an iframe to show the result with html

i have an input search in a form i want to get something in form and search it in bing.com then show result in an iframe

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SearchBing</title>
    <base target="iframe1">
</head>
<body style="text-align: center;">
    <form action="https://www.bing.com/search?q" method="POST" >
        <input type="search"  name="q" style="border:2px solid grey; border-radius: 10px; width: 400px; height: 30px;" />
        <input type="submit" value="search"  style="background-color:brown; color:white; height:25px; width:80px; border:none; border-radius:10px; font-size: 18px; "/>
        <br/>
        <br/>
        <iframe name="iframe1" height="400px" width="800px" style="border: 2px solid black; border-radius: 10px;"></iframe>
    </form>
</body>
</html>

Upvotes: 2

Views: 375

Answers (1)

Titulum
Titulum

Reputation: 11486

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SearchBing</title>
    <base target="iframe1">
</head>
<body style="text-align: center;">
    <div>
        <input id="input" type="search"  name="q" style="border:2px solid grey; border-radius: 10px; width: 400px; height: 30px;" />
        <button id="submit" style="background-color:brown; color:white; height:25px; width:80px; border:none; border-radius:10px; font-size: 18px; ">search</button>
        <br/>
        <br/>
        <iframe id="iframe1" name="iframe1" height="400px" width="800px" style="border: 2px solid black; border-radius: 10px;"></iframe>
    </div>
    <script>
    document.getElementById("submit").onclick = function() {
      const value = document.getElementById("input").value;
      const iframe = document.getElementById("iframe1");
      iframe.src = `https://www.bing.com/search?q=${value}`
    }
    </script>
</body>
</html>

Upvotes: 1

Related Questions