How to display a URL from a form box using HTML and a javascript?

Question

Trying to use a form box with HTML to create a url that can be used to change an IFRAME. This is what I currently have.

<input type="url" id="URL" value="">
<button onclick="webFunct()">Go!</button>
<br><a href= id="ViewURL" target="WebViewer></p>

<script>
function webFunct() {
    var x = document.getElementById("URL").value;
    document.getElementById("ViewURL").innerHTML = x;
}
</script>

<iframe width="100%" height="640px" name="WebViewer">
</iframe>

I like the form box to change the IFRAME to the website that was entered by the user to visit. I know this information is minimal and possibly vague but I normally don't ask for help and I don't know what else to ask.

Original code from: http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_url_get

stackoverflow.com/questions/3730159/…

ashkufaraz
– ashkufaraz

2014-12-11 18:12:33 +00:00
Commented Dec 11, 2014 at 18:12 — ashkufaraz
– ashkufaraz, Commented Dec 11, 2014 at 18:12

Alexis Peters · Accepted Answer · 2014-12-11 18:10:51Z

4

<input type="url" id="URL" value="">
<button onclick="webFunct()">Go!</button>

<script>
function webFunct() {

    document.getElementById("frame").src = x;
}
</script>

<iframe width="100%" id="frame" height="640px" name="WebViewer">
</iframe>

Dont forget to change "x" to an url

answered Dec 11, 2014 at 18:10

Alexis Peters

1,6511 gold badge11 silver badges17 bronze badges

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

1 Comment

arielnmz Over a year ago

"The usage of inline event handling by advocation ... is heavily discouraged, instead use event listeners"

Funk Forty Niner · Accepted Answer · 2014-12-11 18:26:53Z

3

You can set URL of iframe programmatically:

document.getElementById('web-view').src = url;

Check this out: http://jsfiddle.net/andunai/d1zavddu/

However, please note that many websites, e.g. google.com and yahoo.com do not permit getting themselves inserted into iframes.

edited Dec 11, 2014 at 18:26

Funk Forty Niner

74.2k14 gold badges71 silver badges146 bronze badges

answered Dec 11, 2014 at 18:11

Andrew Dunai

3,11921 silver badges27 bronze badges

1 Comment

Nerokin Over a year ago

Exactly what I wanted. Works like a charm. Thanks!

Collectives™ on Stack Overflow

How to display a URL from a form box using HTML and a javascript?

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related