CODEWITHSUNDEEP
htmlformsiframe
Jacob Wood
Jacob Wood

Reputation: 199

Change iframe src to the result of a form input

I want to be able to have it so when the user can put whatever website they want in the form input and click submit and have that website load up in the iframe.

My code is:

<body>
<form method="post" target="browser">
<input style="width:82%;" placeholder="Put the website here" name="url" type="text" />
<input style="width:8%;" name="submit" type="button" value="Go" />
</form>
<iframe name="browser" src="http://google.com" style="height:100%; width:100%"></iframe>
</body>

Kinda like a mini browser, there is more to the website and this won't be used for a practical purpose other than a joke, so I'm not to worried about bad practices.

Preferably not javascript, but it's okay if it is.

Thanks!

Upvotes: 1

Views: 10069

Answers (5)

Benyamin Beyzaie
Benyamin Beyzaie

Reputation: 573

there is a way without using javascript in special cases you can do the job. for example your domain name is constant and you want to change the query params, say you want to have ifram to search in bing.com...

here is how:

  1. Set a name for your iframe like this: <iframe name="myiframe" src="--a default source--">
  2. Set the form action and method and target to the ifram: <form action="https://www.bing.com/search" method="GET" target="myiframe">
  3. put these two inputs in the form:
      <input type="text" name="q" id="" />
      <input type="submit" value="search" />

and now if you hit the submit button the https://www.bing.com/search?q=val will be set as the src in your iframe.

Upvotes: 0

PurkkaKoodari
PurkkaKoodari

Reputation: 6809

It shouldn't be possible without JavaScript, but here is way to do it with:

<input style="width:82%;" placeholder="Put the website here" name="url" id="url" type="text" />
<input style="width:8%;" name="submit" type="button" value="Go" onclick="document.getElementById('browser').src = document.getElementById('url').value;" />
<iframe name="browser" id="browser" src="http://google.com" style="height:100%; width:100%"></iframe>

You don't even need the form, as we don't send anything to the server. Also note I added an ID value for the elements. Also you can change the <input type="button"> to a <button> tag:

<button style="width:8%;" name="submit" onclick="document.getElementById('browser').location = document.getElementById('url').value;">Go</button>

Upvotes: 2

p e p
p e p

Reputation: 6674

I would say that going with a javascript-only solution is the easiest here. I slightly changed your HTML to call a javascript function when the button is clicked.

<form method="post" target="browser">
<input id="txtUrl" style="width:82%;" placeholder="Put the website here" name="url" type="text" />
<input style="width:8%;" type="button" value="Go" onclick="setBrowserFrameSource(); return false;"/>
</form>
<iframe id="browser" name="browser" src="http://google.com" style="height:100%; width:100%"></iframe>

This simple function then changes the source of your iframe:

<head>
<script type="text/javascript">
    function setBrowserFrameSource(){
        var browserFrame = document.getElementById("browser");
        browserFrame.src= document.getElementById("txtUrl").value;
    }
</script>
</head>

Upvotes: 2

faino
faino

Reputation: 3224

Here's an unobtrusive way to handle your problem; works fine in modern browser (if you would like support for older versions of IE, look into readystatechange):

<!DOCTYPE html>
<html>
    <head>
        <title>IFRAME Script</title>
        <script>
            (function(d){
                var init = function(){
                    var form = d.getElementById("my_form"), input = d.getElementById("url"), iframe = d.getElementById("browser");
                    form.addEventListener("submit", function(e){
                        var val = input.value;
                        if(val) {
                            iframe.src = val;
                            console.log(val);
                        }
                        e.preventDefault();
                    }, false);
                };
                d.addEventListener("DOMContentLoaded", init, false);
            })(document);
        </script>
    </head>
    <body>
        <form method="post" target="browser" id="my_form">
            <input style="width:82%;" placeholder="Put the website here" name="url" id="url" type="text" />
            <input style="width:8%;" name="submit" type="button" value="Go" />
        </form>
        <iframe name="browser" id="browser" src="http://google.com" style="height:100%; width:100%"></iframe>
    </body>
</html>

Upvotes: 0

Karthikeyan
Karthikeyan

Reputation: 990

Hope you want to do this, entirely in Client side.

Without Javascript, you can't achieve this, since it is dynamic in nature.

First off, create an id for your iframe, and add a script like this, in the click handler,

document.getElementById('iframeid').src = 'pageurl';

Upvotes: 0

Related Questions