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

http://stackoverflow.com/questions/3730159/changing-iframe-src-with-javascript — ashkufaraz, Dec 11 '14 at 18:12

score 4 · Answer 1 · answered Dec 11 '14 at 18:10

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 '14 at 18:10

Alexis Peters

1,583
1
10
17

*"The usage of inline event handling by advocation ... is heavily discouraged, instead use event listeners"* – arielnmz Dec 11 '14 at 18:14

score 3 · Accepted Answer · edited Dec 11 '14 at 18:26

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 '14 at 18:26

Funk Forty Niner

74,450
15
68
141

answered Dec 11 '14 at 18:11

Andrew Dunai

3,061
19
27

Exactly what I wanted. Works like a charm. Thanks! – Nerokin Dec 11 '14 at 18:23

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

2 Answers2