How to: Change target URL in iFrame using input text+submit fields & JavaScript

Question

So I'm writing a random webpage during my downtime at work, and am coming across an issue where I cannot reliably set a URL as the "src" of an iframe that I, by default, have set to load http://getbootstrap.com. Any attempt to change the URL simply reloads the iframe at its default value.

I've attempted to apply previously documented solutions found on this site, and unfortunately have not had any success.

Here's some of the code I'm working with:

HTML5

<form name="browser" action="" method="post">
<div class="container-fluid">
    <div class="row">
        <input style="color:#000000;" id="addressBar" class="col-md-7" type="text" />
        <!--<input id="goBtn" class="btn btn-default col-md-1" type="submit" onclick="addressGo()" value="Go" />-->
        <input id="goBtn" class="btn btn-default col-md-1" type="submit" onclick="testCall()" value="Go" />
    </div>
</div>
</form>
<div class="container-fluid">
    <div class="row">
        <iframe id="browserFrame" class="col-md-8" src="http://getbootstrap.com" frameborder="0" >
            <p>Something went wrong...target website doesn't allow iframes to be used.</p>
        </iframe>
    ...
    </div>
</div>
...
<script src="..\bootstrap-3.3.7-dist\js\bootstrap.min.js"></script>
<script src="..\JavaScript\Custom.js"></script>

JavaScript

function addressGo () { //Function to browse to inputted address
    var addressBar = document.getElementById("addressBar"); //Declare Address Bar variable
    var browserFrame = document.getElementById("browserFrame"); //Declare iframe variable

    browserFrame.src=addressBar; //Set iframe URL as input from Address Bar
}

function testCall () { //Generic test function (to be re-written as needed)
    var addressBar = document.getElementById("addressBar"); //Declare Address Bar variable
    var browserFrame = document.getElementById("browserFrame"); //Declare iframe variable

    alert("Browser Frame: "+browserFrame+"\nAddress Bar: "+addressBar.);
}

Now upon testing, I receive the testing "alert" that reads with the following message:

Alert:

Browser Frame: [object HTMLIFrameElement]
Address Bar: [object HTMLInputElement]

I feel like I'm close to the solution, but I'm a little out of practice with coding. Any ideas are appreciated. :)

Regards,

~DanceLink

Evelyn Ma · Accepted Answer · 2017-08-12 03:44:12Z

2

<input id="goBtn" class="btn btn-default col-md-1" type="submit" onclick="return addressGo()" value="Go" />

function addressGo () { //Function to browse to inputted address
  var addressBar = document.getElementById("addressBar").value; //Declare Address Bar variable
  var browserFrame = document.getElementById("browserFrame"); //Declare iframe variable
  browserFrame.src=addressBar; //Set iframe URL as input from Address Bar
  return false;
}

The entire page will be reloaded when submit a form. In your case, better to put go button out of the form, so as to no need to return false and onclick="return addressGo()".

answered Aug 12, 2017 at 3:44

Evelyn Ma

4942 silver badges4 bronze badges

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

1 Comment

DanceLink Over a year ago

Thank you, the code works. One thing though, you said I should have the Go button 'outside' of the form? Wouldn't that invalidate the above code then?

Collectives™ on Stack Overflow

How to: Change target URL in iFrame using input text+submit fields & JavaScript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related