How to embed iFrame with external website
<p>I am learning web development and trying to achieve task of adding external webpage to a simple HTML page. So, I have a text box where I need to put the URL and based on that the iframe should render.
Webpage renders properly when <code>src</code> attribute is loaded directly using <code>.attr</code> property of <code>jquery</code>.</p>

<p>Working example without the text field:</p>

<p><strong>HTML</strong></p>

<pre><code>&lt;div id="mydiv"&gt;
     &lt;iframe id="frame" src="" width="100%" height="300"&gt;
     &lt;/iframe&gt;
 &lt;/div&gt;
 &lt;button id="button"&gt;Load&lt;/button&gt;
</code></pre>

<p><strong>SCRIPT</strong></p>

<pre><code>$(document).ready(function(){
$("#button").click(function () { 
    $("#frame").attr("src", "https://www.wikipedia.org/");
});
});
</code></pre>

<p>Below is what I want</p>

<p><strong>HTML</strong></p>

<pre><code>Enter the URL
    &lt;input id="url" type="text"/&gt;
      &lt;div id="mydiv"&gt;
             &lt;iframe id="frame" src="" width="100%" height="300"&gt;
             &lt;/iframe&gt;
         &lt;/div&gt;
         &lt;button id="button"&gt;Load&lt;/button&gt;
</code></pre>

<p><strong>Script</strong></p>

<pre><code>&lt;script&gt;
$(document).ready(function(){
    $("#button").click(function () { 
    var x = $("#url").val();
        $("#frame").attr('src', 'x');
    });
});
&lt;/script&gt;
</code></pre>

<p>I referred this <a href="https://stackoverflow.com/questions/7177080/how-do-i-load-an-url-in-iframe-with-jquery">SO LINK</a> but could not find the answer. My JSfiddle novice attempt tells an error message as <code>{"error": "Please use POST request"}</code>. Do I need to use <code>load</code> jquery method. I just want to read the content of textbox and open the page in iframe with a buttons click. <a href="https://jsfiddle.net/d0nqj9pm/" rel="nofollow noreferrer">Link to my JSFiddle</a></p>