HamzaLAMFAOUAR HamzaLAMFAOUAR - 1 year ago 95
HTML Question

How to display an input's source in an iframe using jQuery?

Good morning,
I'm now a beginner in jQuery and I have a problem using iframes and inputs.
Here's the situation :
I have an input where I can enter (for example) a website, and display it on an iframe. I tried a lot but without a result. Here's my code.
I'd appreciate your help guys, thanks a lot !

<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="">
<input type="button" value="GO" onClick="getval()" />
<input type="text" name="url" src="http://www.google.com" id="textframe">

<iframe src="" id="targetframe"></iframe>

<script type="text/javascript" src="jquery/jquery-3.1.1.js"></script>
<script type="text/javascript">
function getvalue() {
var xframe = $("textframe").val();
$("targetframe").attr('src', xframe);

Answer Source

You were using a undefined function and you didn't put hash symbol on the jquery objects when querying for an id.

I fixed your snippet and it should work.

function getval() {
   var xframe = $("#textframe").val();
   $("#targetframe").attr('src', xframe);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="button" id="btnGo" value="GO" onClick="getval()" />
<input type="text" name="url" value="http://www.stackoverflow.com" id="textframe"> <br>
<iframe src="" id="targetframe"></iframe>

Remember that iframes needs http://in the url in order to work.

If you're on your website and you simply do www.google.com and your website is www.example.com, your iframe source will become www.example.com/www.google.com

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download